关于antdv表格a-table设置scroll属性后表格行错位解决方案

antdv表格a-table设置scroll属性后表格行错位解决方案

1.需求背景

• 最近开发财务项目中使用到了UI框架antdv，使用a-table后需要设置表格一屏显示，即表格内容超过了屏幕之后显示滚动条，但是表格行内容出现错位。
  

解决方案

• 1.先设置a-table的scroll属性，如下：

• <a-table
          ref="table"
          size="small"
          rowKey="id"
          :columns="columns"
          :dataSource="tableData"
          :pagination="ipagination"
          :loading="loading"
          tableLayout='fixed'
          :scroll='{x:true,y:`calc(100vh - ${tableHeight})`}'
          :rowSelection="rowSelection"
          @change="handleTableChange">
  </a-table>
  

• 2.设置了第一步之后，此时表格已经实现了X-Y轴的溢出滚动，保持内容在当前屏幕之内滚动显示，但是此时出现了另外一个问题，表格的行出现了错位问题，解决如下：

• // 出现错位问题的根源在于设置了列宽度之后，如果当前列的内容宽度超出了列宽度，那么当前列宽度被撑开了，而此时列表头的宽度还是初始值，所以导致了错位现象，因此对于内容很多的列需要单独处理，如下：
  columns: [
      {
          title: '科目名称',
          align: "center",
          width: 150,
          ellipsis:true,
          dataIndex: 'summary',
          customRender: function(t) {
              return t.length>7?(t.slice(0, 7) + '...'):t
          }
      },
  ]
  

• 3.注意：尽量避免表格的展开行与固定列一起使用，因为：点击查看

• 到此，错位问题就解决了