vue(element):el-table-column使用v-if列位置错乱问题

在解决问题之前首先需要知道什么是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


方式一:
vue(element):el-table-column使用v-if列位置错乱问题_第1张图片

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不能多次作用在同一组件上,不能会出现风格指南提到的极端情况。

你可能感兴趣的:(vue,elementui,vue,elementui)