对 <el-table> 组件涉及到的动态表格列业务思考
随着业务的开展，对类似的业务有了新的看法。
先看 bug
这里的业务行为如下，筛选年份，驱动表格列更新。
可以看到，数据上是按照操作实时更新的。但是表格列更新是滞后的。更新不及时。
以往的思路
肯定会有某种东西，实现驱动 <el-table-column> 更新的操作。一般使用的是 key 值来驱动更新。
不同的实现思路
之前写过类似的笔记。之前的做法是，让 key 值去动态变化，去控制组件的重新渲染。
个人实际实践下来，该方式不一定好用。这逼着我去使用别的方式实现业务。
现在不能当初的考虑 <el-table-column> 表格列的更新了，还要同时考虑表头。
驱动 vue 组件刷新的方案
基本上是 v-if key 数据等思路。一般是这样去控制组件更新。但是对于动态表格列的功能来说，很容易出现表格抖动等情况。
在 vue2.7 内，我最终采用的是 $forceUpdate() 的方式来强制更新组件。
找到更新不及时的组件
事实上更新不及时的是表头，不是整个表格。我们控制表格组件的重新刷新时，开销太大了。在 element-ui 的 <el-table> 中，表头组件是 ElTableHeader，我们先获得 table 组件实例，再获取 ElTableHeader 组件实例，最后强制要求该组件刷新即可。
实际操作时，代码类似于下面的写法：
js
await nextTick(() => {
// @ts-ignore 更新不及时的是表头组件 这里精准控制其主动强制刷新
nuiTableRef.value.$refs.table.$refs.tableHeader.$forceUpdate();
});贡献者
ruan-cat 阮喵喵