关于前端:Vue-解决eltable表头视图不更新

景象:
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 个时，<ElTableColumn> 也是 4 个，<ElTableHeader> 的 columnsCount 属性变回了 4，确定 el-table 是晓得数据变动的。

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

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

在我遇到的状况中的实现是
<template :slot=”col.slotHead ? ‘header’ : ”” slot-scope=”{column, $index}”>

<slot v-if="col.slotHead" :name="col.slotHead" :row="column" :index="$index"></slot>

</template>
将下面这这种写法改为上面的写法
<template v-if=”col.slotHead” #header=”{column, $index}”>

<slot v-if="col.slotHead" :name="col.slotHead" :row="column" :index="$index"></slot>

</template>
批改后其余性能失常，但原问题仍旧存在，有效。阐明也不是语法的问题。

注:
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。

同步更新到本人的语雀
https://www.yuque.com/diracke…

header=“scope”为 slot=”header” 和 slot-scope=”scope” 的合体, header 为插槽名，scope 为承受的参数。