[Vue]|[Vue] 解决el-table表头视图不更新

现象:
const tableTitle1 = [
{ label: "股票", prop: "stock" },
{ label: "占比", prop: "weight" },
{ label: "持股变化", prop: "change" },
{ label: "最新价格", prop: "lastPrice" }
]
const tableTitle2 = [
{ label: "股票", prop: "stock" },
{ label: "占比", prop: "weight" },
{ label: "持股变化", prop: "change" }
]
由tableTitle1 -> tableTitle2的时候,表现正常。(表头四列变三列,tbody四列数据变为三列)
再由tableTitle2 -> table1Title1的时候,表现异常。(表头依旧三列,tbody三列数据变为四列)
查找类似原因并分析:
Case1
CSDN上有其他同学遇到了表头不更新的问题,它的原因是
表头部分用v-for循环生成的,给每个item(el-table-colum)绑定的key为prop,数据更新时,key没有变,所以el-table觉得表头数据是没有变化的,因此就只更新了整体表格数据、key值有变化的列的表头。
这里我遇到的情况,从表头数据4个变成3个视图变化,从3个变成4个视图变不回去,那么大概率不是这个问题。
用vue devtools查看el-table的内容,发现从3个变回4个时,也是4个,的columnsCount属性变回了4,确定el-table是知道数据变化的。
测试直接用el-table不做封装,来回变更也是正常的。
Case2
使用 slot="header",导致自定义表头视图不更新
case2的具体情况是element 官网上el-table上使用插槽 slot=“header”来实现自定义表头,
而这种插槽的使用方式会导致视图更新失效。将slot=“header” 改成#header ,就可以解决他的问题了。
header=“scope” 为 slot="header" 和 slot-scope="scope" 的合体, header 为插槽名, scope 为接受的参数。 在我遇到的情况中的实现是

将上面这这种写法改为下面的写法

修改后其他功能正常,但原问题依旧存在,无效。说明也不是语法的问题。
注:
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。
【[Vue]|[Vue] 解决el-table表头视图不更新】同步更新到自己的语雀
https://www.yuque.com/diracke...

    推荐阅读