一、问题描述

antd table不支持列可选，自己实现了一下列可选，但发现在横向滚动到中间位置时，选中某些列去展示时，会出现header错位，但此时横向滚动一下滚动条则会恢复正常header位置。

问题现象图示：

1、横向滚动到中间位置：

2、选择之前没有渲染选中的列进行展示，此时header出现了回到初始状态位置，出现错位：

3、但此时滚动一下横向滚动条，header瞬间复位成功：

4、此外，对于之前渲染成功的列，在选择取消列展示时，不会出现header错位：

（不会重置ant-table-header的scrollLeft为0）

二、原因分析

首先，在选择之前未渲染的列后，该column的header和data是渲染的，只是header回到了横向滚动的初始位置。

header的横向滚动的位置计算出现了错误，赋值为0，但横向稍微滚动一下，又能够正确赋值为横向滚动位置，从而恢复header的错位展示问题。

由于需求是需要table固定表头，对table的scroll属性设置了y，当没有对scroll设置y时，此时，选中列时，不会出现header错位：

当设置固定定位后，header错位，此时header的scrollLeft为0，但是table-body的的scrollLeft是不为0的。

当横向滚动一下时，header的scrollLeft与table-body的的scrollLeft一致了，不错位。

1、方案一、刷新table，重新计算data、column的思路：给table设置一个随机数的key，当选中列的数据对象变化时，触发table重新渲染。– 不可取

问题：导致每次选择列的时候，table刷新，并且刷新data、column等，导致table的翻页、排序状态受到了影响。

2、方案二：从现象本身入手，在选择列的时候，动一下table的横向滚动条（设置ref，获取table-body节点，设置该节点的scrollLeft偏移1px,再偏移-1px），让header恢复到正确位置。–能解决问题，但比较hack

3、方案三：当可选列状态变化时，设置header的横向滚动条到之前的table-body的滚动位置。

问题：antd-table-header的scrollLeft不能正确被设置，每次新增未渲染过的列时，会重置为0。