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

本文目录

• 1. 现象
• 2. 解决
• 3. 附加方案

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。