锐客网

  1. 首页 > it技术 > >

[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...

    推荐阅读


    上一篇：Hadoop 入门笔记四 : 分布式文件HDFS

    下一篇：自宅创业 - #13 创业半年回顾