景象:
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 ，就能够解决他的问题了。

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

在我遇到的状况中的实现是
<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...