element ui 动态表头不刷新问题

今天弄vue前端，动态表头出现如题问题。代码如下

<el-table-column v-for="(item, index) in tableHeads" :key="index">
<template slot="header">
//处理表头业务逻辑……

  <div>{{ item.num }}</div>

</template> </el-table-column>

　　搜索了半天，开始以为是vue数据绑定刷新问题，后发现不是这个原因。因为表格数据是刷新的。

       继续搜了搜，最终依靠这篇博文解决问题。记录一下地址：

前端 - [Vue] 解决el-table表头视图不更新 - 个人文章 - SegmentFault 思否    https://segmentfault.com/a/1190000040819184

[Vue] 解决el-table表头视图不更新 (yuque.com)     https://www.yuque.com/dirackeeko/blog/gegpzk

　　最终修改 <template slot="header"> 为<template #header>  ，:key="index"  修改为:key="Math.random()"。问题解决。

 下面是别人分析问题的思路，记录学习一下：

查找类似原因并分析:
Case1
CSDN上有其他同学遇到了表头不更新的问题，它的原因是
表头部分用v-for循环生成的，给每个item(el-table-colum)绑定的key为prop，数据更新时，key没有变，所以el-table觉得表头数据是没有变化的，因此就只更新了整体表格数据、key值有变化的列的表头。

这里我遇到的情况，从表头数据4个变成3个视图变化，从3个变成4个视图变不回去，那么大概率不是这个问题。
用vue devtools查看el-table的内容，发现从3个变回4个时，<ElTableColumn>也是4个，<ElTableHeader>的columnsCount属性变回了4，确定el-table是知道数据变化的。

测试直接用el-table不做封装，来回变更也是正常的。

Case2
使用 slot="header",导致自定义表头视图不更新
case2的具体情况是element 官网上el-table上使用插槽 slot=“header”来实现自定义表头，
而这种插槽的使用方式会导致视图更新失效。将slot=“header” 改成#header ，就可以解决他的问题了。

注:
v-slot 指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope attribute 的 API 替代方案。在接下来所有的 2.x 版本中 slot 和 slot-scope attribute 仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中。

判断就是经过封装后的table组件在处理视图更新的时候出现了异常。
再深层次的原因没有探究，解决思路是监听传入tableTitle的变化，如果有变化就让组件强制刷新。
方案是在组件el-table上绑定一个number类型的key，初始值为1，当传入的tableTitle变更时，key加1