element table动态切换

需求是table表格动态切换时，一些列会隐藏或显示

刚开始只是设置了一个状态位用v-if去判断该列是否显示

            <el-table
                v-loading="loading"
                :data="tableData"
                highlight-current-row
                element-loading-text="拼命加载中"
                border
                @selection-change="handleSelectChange"
            >
                <el-table-column v-if="flag === 'current'" type="selection">
                </el-table-column>
            </el-table>

结果发现动态切换table表格时，该列并没有被隐藏

后来查阅element的官方文档和一些资料发现要通过key值去标识切换时对应的table，即每次切换对应的表格实际上并不是同一个，成功解决以上问题。代码如下：

              <el-table
                :key="tableKey"
                v-loading="loading"
                :data="tableData"
                highlight-current-row
                element-loading-text="拼命加载中"
                border
                @selection-change="handleSelectChange"
            >
                <el-table-column v-if="flag === 'current'" type="selection">
                </el-table-column>
            </el-table>

这里动态绑定的key值，保证是唯一的就可以啦