解决Antd 表格固定列后列间有空白间隙的问题

问题描述：

antd 表格设置列fixed属性，scroll为x:true后，如果列数少，会出现列间空白间隙。

原因：

antd的表格为了实现固定列，横向滚动的效果，会多渲染出一个用于覆盖原始表格固定列的表格，该表格只渲染被固定的列，然后在横向滚动条滚动时，该表格固定不动，下面被覆盖的原始表格来回滚动，从而实现左右某些列固定，中间列可以滚动的效果。然后，在渲染时，两个表格固定列每一列的列宽度不一致，而被覆盖的列的css属性设置了visibility:hidden,一旦被覆盖的固定列宽度过大，就会出现空白间隙。

解决方案：

通过js调整两个固定列的宽度，让其一致。

代码：

1、给表格、左固定列、右固定列加了唯一的className，

 <div className={'crud-basic-table'}>
        <Table 
          rowKey={this.getRowKey}
          scroll={{ x: true }}
          rowSelection={rowSelection}
          columns = {columns}
          dataSource={dataSource}
          pagination={paginationProps}
          {...rest}
          ref={(ref) => { this.refDom = ref; }}
        />
      </div>

   if(columns && columns.length>0){
    columns.forEach(col => {
      if ('fixed' in col) {
        if(col.fixed==='true'||col.fixed==='left'){
          col.className = col.className?col.className+' antd-table-fixed-left-column':'antd-table-fixed-left-column'
        }else if(col.fixed==='right'){
          col.className = col.className?col.className+' antd-table-fixed-right-column':'antd-table-fixed-right-column'
        }
      }
    })
   }

然后在document.ejs的js脚本中，新增脚本如下：

  <script>
      //解决Antd 列空白间隙问题
      //表格固定列宽度设置为底层被覆盖的固定列宽度
      var crudTable = document.getElementsByClassName('crud-basic-table');
      for (var i = 0; i < crudTable.length; i++) {
        var ct = crudTable[i];
        //左侧固定列
        var lf = ct.getElementsByClassName('ant-table-fixed-left');
        if(lf.length>0){
          var lfColumn = lf[0].getElementsByClassName('antd-table-fixed-left-column');
          var fixedLfCol = ct.getElementsByClassName("ant-table-fixed-columns-in-body antd-table-fixed-left-column");
          for (let j = 0; j < lfColumn.length; j++) {
            lfColumn[j].style.width = fixedLfCol[j].offsetWidth+"px";
          }
        }
        //右侧固定列
        var rg = ct.getElementsByClassName('ant-table-fixed-right');
        if(rg.length>0){
          var rgColumn = rg[0].getElementsByClassName('antd-table-fixed-right-column');
          var fixedRgCol = ct.getElementsByClassName("ant-table-fixed-columns-in-body antd-table-fixed-right-column");
          for (let j = 0; j < rgColumn.length; j++) {
            rgColumn[j].style.width = fixedRgCol[j].offsetWidth+"px";
          }
        }
      }
    </script>

效果：