antd table(表格)固定列后某一列显示不完全问题

问题

使用 antd 表格进行数据展示时，对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，可以 scroll.x 配合使用。但是其中也会遇到一些问题，在表格固定列后，非固定列会有显示不完全或者无法显示的问题。

在上图的表格的第五列，可以看到，使用 antd 表格的 scroll.x 属性后，其无法完全显示。

解决办法

这是因为使用 antd table 的 scroll 属性后，实际上生成的是两个表格了，一个是类名为ant-table-scroll（表格1）的表格，一个是类名为ant-table-fixed-left（表格2）的表格，在表格2的tbody tr td div span的宽度会随着内容宽度变化而变化，就算设置了overflow:hidden后，对表格2不会生效。所以当span的内容越长的时候，就会把父级div无限撑开，导致后面的非固定列无法完全显示或者完全不显示。我的处理方法是对于非固定列的前一列添加一个类名，并设置固定宽度，超出部分隐藏起来就好了。

当然，如果你table的columns是像我下面这么写的

const columns = [
  {
    column1
  },
  {
    column2
  },
  ...
  {
    title: '复用段名称',
    render: (text, record) => (
      <div className="record-name">
        <span title={record.multiplexName}>{record.multiplexName}</span>
      </div>
    ),
    dataIndex: 'multiplexName',
    align: 'left',
    width: '7.5rem',
    // width: '8%',
    fixed: 'left',
  },
  ...
];

record-name就是设置的类名

给类名设置样式

.record-name {
  width: px2rem(120); // 自己封装的 px 2 rem 方法
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: keep-all;
  text-align: left;
}

注意：最后可能还需要让非固定列的第一列靠右或者剧中对齐，如果你没有设置的话，或者你设置的表格的列对齐方式为左对齐。

问题解决！