问题:
<el-table-column label="操作">
<template slot-scope="{ row }">
<el-button type="text" v-if="row.type == 1">详情</el-button>
<el-button type="text" v-else :disabled="row.type == 3">删除</el-button>
</template>
</el-table-column>
在使用el-table时,有一个操作列,里面的操作是根据v-if控制渲染的,然后就出现了切页或者查询重置等就渲染混乱的问题。
原因分析:
vue为了提升渲染性能,使用了虚拟dom机制,如果不设置key会最大限度重用DOM元素,但是有些时候过度重用DOM元素会造成渲染错误,尽量复用已存在相同节点元素而不会重新渲染,导致使用v-if没有达到预期效果
解决办法:
解决虚拟dom导致的渲染错误问题,就是设置key值,给具有相同父元素的子元素设置具有唯一值的key,使内容重新渲染
<el-table :data="" :key="Date.now()">
也可以使用随机数设置key值 Math.random()
key值也可以设在el-table-column 里,使用一个div将插槽内容包起来,在div上设置key值,就可以使插槽内容重新渲染。