【tip】解决ant-design-vue table组件fixed固定列时表格中间的空白列问题

最近遇见了一个小bug，测试同学报给我一个BUG：一个antdv表格在她电脑上出现了空白列，如下图：

挺神奇的，不知道怎么出现了这么一列，用devtool 看了一下发现这一列是我自定义的操作列

操作列被我设置为 fixed=right, 此时ant-design-vue的 table 组件会创建一个专门的 fixed table来显示这些被固定的列，样式取用主表格的样式，可以看出固定的列和主table的列的列宽不一致，一开始我以为是因为表格在计算布局时取用了不正确的列宽，后来在源码中发现，这在ant-design-vue中是一种默认行为，下面会细说。先来解决问题，因为这种默认行为是不被UI同学认可的。

fixed固定列时表格中间的空白列的解决方法

既然组件自动计算列宽的功能失效了，那么解决这个问题的办法其实就很清晰了：如果固定了操作列的列宽，就不需要计算样式了。 试一下：

    {
      title: '操作',
      dataIndex: 'action',
      align: 'center',
      fixed: 'right',
      width: '100px',
      scopedSlots: { customRender: 'action' },
    }

解决了，两个表格严丝合缝；

fixed固定列时表格中间出现空白是一种默认行为。

看了下 antdv 的table组件源码：

    cols = cols.concat(leafColumns.map(function (_ref) {
      var key = _ref.key,
          dataIndex = _ref.dataIndex,
          width = _ref.width,
          additionalProps = _ref[INTERNAL_COL_DEFINE];

      var mergedKey = key !== undefined ? key : dataIndex;
      // 接收指定width
      var w = typeof width === 'number' ? width + 'px' : width;
      return h('col', _mergeJSXProps([{ key: mergedKey, style: { width: w, minWidth: w } }, additionalProps]));
    }));

可以看到 antdv 使用colgroup注入宽度样式，但是只接受自定义配置的宽度，组件并不会自动帮我们计算两个table的对应列且保持一直的宽度。

后话

但是产品还得继续开发，代码需要接着写，前面提到的方法只适用于可接受固定列宽度的表格，不适用于无法确定fixed列宽，如果你真的无法固定列宽，可以尝试计算最大宽度来动态地改变column配置，此时你可能需要手动调用table组件的 $forceUpdate 或者重新渲染整个表格。我个人不喜欢这种hack方法。

如果你有更好的解决办法，欢迎留言。