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

问题：

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

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

《前端》Element ui 表格（Table）组件中前端实现数据分页和模糊查询--未看
我是用的Element ui 表格(Table)组件中的例子下面是别人自己写的方法: Element ui 表格(Table)组件中前端实现数据分页和模糊查询_明天也要努力的博客-CSDN博客 h ...
关于Antd 表格（Table）中插入图片
HTML <a-table:columns="columns":data-source="data":pagination="false&quo ...
Spread Studio 8 新特性：表格（Table）功能
在全新发布的Spread Studio 8 的WinForms平台中,新增了功能强大的表格(Table)功能,它可以将单元格区域显示为一个表格,包含过滤器.绑定行.内置样式等功能,并与Excel中的表 ...
Element ui Table表格匹配字典项中的数据
在工作中通常会遇到Table表格匹配字典项中的数据这里介绍几种方法大家仅供参考 <el-table:data="tableData"style="width: 10 ...
解决Element Plus 中el-table表格在一些浏览器中不对齐的问题
解决Element Plus 中el-table表格在一些浏览器中不对齐的问题 #### 问题今天在测试项目时候,意外的发现项目在360浏览器中Element Plus 中el-table表格不 ...
php中td的属性设置,html table表格是什么？table标签中各种属性的使用方法
html table表格是什么? 首先让我们了解什么是表格,还有表格的作用什么是table表格:由一些被称之为单元格的矩形框按照从左到右从上到下的顺序排列到一起组成的 table表格的作用:以 ...
vue table表格中只有表头加竖线分割
table表格中只有表头加竖线分割给<el-table>加一个属性 : :header-cell-style="{'border-right':'1px solid #8888 ...
element ui表格中的algin属性无效
我们在使用element ui表格中,经常需要调整表格内容的文字对齐位置,例如: 文档中描述是使用algin="left / right / center"调整文字对齐,但是我们使 ...
html中表格元素的英文,HTML中表格元素TABLE,TR,TD及属性的语法
table:表格元素及属性属性说明 width 表格宽度,单位为%或象素 border 表格边框线的粗细 cellspacing 表格间距 cellpadding 表格边距 ...

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

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

最新文章

热门文章