今天通过v-if控制el-table-column 中slot插槽的数据时,明明isProvider
的值发生了改变,但在页面上并没有生效
<el-table-column
align="center"
prop="normalLeadTime"
:label="$t('vendorMod.normalLeadTime')"
>
<template slot="header">
<span v-if="isProvider" class="red">姓名</span>
</template>
</el-table-column>
后面发现是因为表格是element-ui通过循环产生的,而vue在dom重新渲染时有一个性能优化机制,即相同dom会被复用,因此无法更新。这种情况只需要通过key去标识一下当前行是唯一的,不允许复用,就行了
在组件上添加 :key="Math.random()"
对行进行标识即可:
<el-table-column
align="center"
prop="normalLeadTime"
:label="$t('vendorMod.normalLeadTime')"
:key="Math.random()"
>
<template slot="header">
<span v-if="isProvider" class="red">姓名</span>
</template>
</el-table-column>