今天弄vue前端，动态表头出现如题问题。代码如下
1 2 | <el-table-column v-for="(item, index) in tableHeads" :key="index"><template slot="header"><br>//处理表头业务逻辑…… <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
浙公网安备 33010602011771号