vue+ant design 中的table想要高度根据内容撑开现在换行后操作列显示错行

这种情况可能是由于单元格内容过长造成的,可以尝试以下解决方法:

  1. 设置列的宽度:可以通过设置每列的宽度来避免单元格内容过长造成的错行问题。

  2. 禁止单元格换行:可以通过CSS样式设置单元格不允许换行,这样可以避免单元格内容过长造成的错行问题。

  3. 使用 ellipsis 属性:可以使用CSS的 ellipsis 属性来实现单元格内容过长时自动省略,这样可以避免错行问题。

示例代码:

<template>
  <div>
    <a-table
      :columns="columns"
      :dataSource="dataSource"
      :pagination="false"
      :scroll="{ y: 'calc(100vh - 260px)' }"
      :components="{ body: { row: CustomRow } }"
    />
  </div>
</template>

<script>
import { Table } from 'ant-design-vue';
const { Column } = Table;

export default {
  data() {
    return {
      dataSource: [
        {
          key: 1,
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park, New York No. 1 Lake Park, New York No. 1 Lake Park, New York No. 1 Lake Park, New York No. 1 Lake Park',
          operation: 'Edit'
        },
        {
          key: 2,
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
          operation: 'Edit'
        },
        {
          key: 3,
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
          operation: 'Edit'
        }
      ],
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          width: 150
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
          width: 70
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
          ellipsis: true
        },
        {
          title: 'Operation',
          dataIndex: 'operation',
          key: 'operation',
          width: 100,
          scopedSlots: { customRender: 'operation' }
        }
      ]
    }
  },
  components: {
    CustomRow: {
      props: {
        index: Number,
        row: Object
      },
      render() {
        const { index, row } = this.$props;
        const columns = this.$parent.columns;
        return (
          <tr>
            {columns.map((col) => (
              <td style={{ background: index % 2 === 0 ? '#f0f0f0' : '#fff' }}>
                {col.scopedSlots && col.scopedSlots.customRender ? col.scopedSlots.customRender(row) : row[col.dataIndex]}
              </td>
            ))}
          </tr>
        );
      }
    }
  }
}
</script>

在上述示例代码中,我们使用了CSS的 ellipsis 属性来实现单元格内容过长时自动省略。通过设置 ellipsis 属性,当单元格内容超过单元格宽度时,会自动省略,并在单元格末尾显示省略号。

标签: 科技


原文地址: https://cveoy.top/t/topic/b5vM 著作权归作者所有。请勿转载和采集!