Element技能点--el-table 列排序自动变化问题

点此查看全部文字教程、视频教程、源代码

1. 现象

使用了el-table组件后，想根据不同的条件显示不同的列，例如：

<template>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column v-if="type==1"
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column  v-if="type==1"
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column  v-if="type==2"
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

结果会出现列的顺序不固定，按我们的设计type为1时，先显示日期列，再显示姓名列，实际上列的出现顺序有时会倒置。

甚至当列多了的时候，列名称和列内容都出现不对应。

2. 解决

将v-if改为v-show，就这么简单。

3. 附加方案

如果v-show都没用，可以直接创建多个表格，然后控制el-table的v-if。