vue(element):el-table-column使用v-if列位置错乱问题
在解决问题之前首先需要知道什么是v-ifv-if: 动态的向DOM树内添加或者删除DOM元素,切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件v-show不能作用于column组件,所以不能使用。接下来就要聊聊这个问题了,开始我以为是:data里的数据有误,可通过工具查看后发现数据无误,那么应该就是v-if这个属性了,它不同于v-show,v-show等同于styl
在解决问题之前首先需要知道什么是v-if
v-if: 动态的向DOM树内添加或者删除DOM元素,切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件
v-show不能作用于column组件,所以不能使用。
接下来就要聊聊这个问题了,开始我以为是:data里的数据有误,可通过工具查看后发现数据无误,那么应该就是v-if这个属性了,它不同于v-show,v-show等同于style=“display:none;”,v-if是直接销毁再重建元素,我想应该是因为我多次调用这个属性导致了数据混乱。
网上提供了一种方法,就是绑定:key=“Math.random()”,给列进行重新排序,但经过测试发现,跳转至其他组件时页面会闪动。
vue风格指南
还是官方的香,这是中文社区vue.js
方式一:
v-if经常被用于el-table-column列的显隐,根据需要可能会对多列进行显隐控制,这就是我出现位置错乱问题的原因。根据上面的启发,其实可以对整个table进行v-if判断,这样只用判断一次,另一个table就是权限控制后显示的数据。
<template v-if="show">
<el-table :data="data">
<el-table-column
v-for="(item,index) in Table"
:prop="item.prop"
:key="index"
:width="item.width"
:label="item.label">
</el-table-column>
<!--
v-show本质就是通过设置css中的display设置为none,控制隐藏,控制css,v-show不能直接用于el-table-column
v-if是动态的向DOM树内添加或者删除DOM元素,切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件
-->
<el-table-column prop="amount1">
</el-table-column>
<el-table-column prop="amount2">
</el-table-column>
<el-table-column prop="amount3">
</el-table-column>
</el-table>
</template>
<!--两个v-if控制不同权限的显示,不能上面使用v-if="show",下面使用(非)v-if="!show",不然同样会有列位置混乱的问题,需要定义一个新的数-->
<template v-if="amt">
<el-table :data="data">
<el-table-column
v-for="(item,index) in Table"
:prop="item.prop"
:key="index"
:width="item.width"
:label="item.label">
</el-table-column>
<!--
v-show本质就是通过设置css中的display设置为none,控制隐藏,控制css,v-show不能直接用于el-table-column
v-if是动态的向DOM树内添加或者删除DOM元素,切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件
-->
<el-table-column prop="amount4">
</el-table-column>
<el-table-column prop="amount5">
</el-table-column>
<el-table-column prop="amount6">
</el-table-column>
</el-table>
</template>
后记->方式二:
出现闪烁是因为满足了两种情况:
1、v-if控制显示隐藏组件。
2、使用《template scope=“scope”》获取表格数据。
满足上述情况时可能会出现位置错乱和页面闪烁。
解决:最有效的方法是对table中的每一列添加一个key属性,key值不重复,这样每次加载就会对列进行排序。
总结下来v-if不能多次作用在同一组件上,不能会出现风格指南提到的极端情况。
更多推荐
所有评论(0)