element-ui table组件使用v-if时的问题

本文主要是介绍element-ui table组件使用v-if时的问题，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

element-ui项目中经常遇到需要使用v-if指令来根据情况动态显示隐藏某些列情况，这时就会出现滚动条样式异常、列错乱、列宽错乱等问题

解决办法：在el-table上添加:key="Math.random()"但这会在某些操作下每次重新渲染table，例如获取选择行、一些操作交互等情况，因为Math.random()随机数一直在变化，而且对于selection选择性表格在获取到选择行时会出现所选择的标记(选择的那个勾)消失的问题，但其实数据是获取到的，这也是因为Math.random变化的问题

给el-table-column每一列添加:key="Math.random()"也会出现列每次重新渲染闪烁的问题

终极解决：给每一列el-table-column添加key值为固定值，例如列的prop属性值，这样避免了v-if切换时列错乱和列宽错乱问题，但还是会出现表格滚动条上移的问题，偏离原始位置

解决办法：在设置显示隐藏的办法后面添加

this.$nextTick(() => {this.$refs.multipleTable.doLayout();})

这篇关于element-ui table组件使用v-if时的问题的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！