使用element的表格，el-table-column中使用slot加v-if出现的渲染混乱失效

JuS巨山超力霸

已于 2023-05-10 16:27:25 修改

阅读量1.9k

点赞数 1

文章标签： elementui vue.js

于 2023-02-06 11:20:06 首次发布

本文链接：https://blog.youkuaiyun.com/m0_49623851/article/details/128898359

版权

在使用Vue的el-table组件时，由于虚拟DOM的机制，不设置key可能导致渲染错误。当使用v-if控制操作列内容时，可能会出现页面切换或查询后渲染混乱。解决方法是在el-table或el-table-column中设置具有唯一值的key，比如使用Date.now()或Math.random()，以确保内容正确重渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

<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值，就可以使插槽内容重新渲染。