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

---

方式一：

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