element-ui中的el-table-column使用v-if导致列位置与数据错乱
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了element-ui中的el-table-column使用v-if导致列位置与数据错乱相关的知识,希望对你有一定的参考价值。
参考技术A 根据需求,当某一项列数据时或者某属性时才显示此列,使用v-if进行显示隐藏后,发现会有随机列位置错乱与数据错乱现象。这是因为在v-for或者v-if切换标签时,多个相同的标签被渲染,如果不添加key来区分则会出现复用的情况。而原本这些标签每一个都是独立的,于是需要添加key来做区分! 表格是element-ui通过循环产生的,而vue在dom重新渲染时有一个性能优化机制,就是相同dom会被复用,这就是问题所在,所以,通过key去标识一下当前行是唯一的,不许复用,就行了
给标签el-table-column添加key
vue中的element-ui和react的element-ui
首先分享一个使用vue做的后台管理系统网站的示例,里面的控件都是用element-ui做的。
读了一下它的源代码,深感有了element-ui 做UI太方便了,Android里做UI是多么的麻烦。
这里记录一下element-ui的官方地址,方便以后需要的时候查看。
vue里使用的element-ui地址:
https://element.eleme.cn/#/zh-CN/component/button
react里使用的element-ui地址:
https://elemefe.github.io/element-react/#/zh-CN/button
以上是关于element-ui中的el-table-column使用v-if导致列位置与数据错乱的主要内容,如果未能解决你的问题,请参考以下文章
使用element-ui中的loading时发现close()报错,俗称 配置了loading中的optios就无法close()的一部分解答