解决 Element-ui中 表格（Table）使用 v-if 条件控制列显隐时数据展示错乱的问题

本文 Element-ui 版本 2.x

问题

在 el-table-column 上需根据不同 v-if 条件来控制列显隐时，就会出现列数据展示错乱的情况（要么 A 列的数据显示在 B 列上，或者后端返回有数据的但是显示的为空），如下所示。

<template>
  <div>
    <el-table
      :data="tableData"
      border
      size="mini"
      style="width: 100%">
      <el-table-column prop="date" label="登记日期" align="center" ></el-table-column>
      <el-table-column prop="name" label="姓名" align="center"></el-table-column>
      <el-table-column prop="age" label="年龄" align="center"></el-table-column>
      <el-table-column prop="sex" label="性别" align="center" v-if="flag1"></el-table-column>
      <el-table-column prop="height" label="身高" align="center" v-if="flag2"></el-table-column>
      <el-table-column prop="address" label="城市" align="center"></el-table-column> 
    </el-table>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

解决方法

在每个需要使用 v-if 或 v-else 的 el-table-column 上增加 key 作为唯一标识，这样渲染的时候就不会因为复用原则导致列数据混乱了。关于key值，一般习惯使用字段名，也可随机生成一个值，只要具有唯一性就可以。

<template>
  <div class="home">
    <el-table
      :data="tableData"
      border
      size="mini"
      style="width: 100%">
      <el-table-column prop="date" label="登记日期" align="center" ></el-table-column>
      <el-table-column prop="name" label="姓名" align="center"></el-table-column>
      <el-table-column prop="age" label="年龄" align="center"></el-table-column>
      <el-table-column prop="sex" label="性别" align="center" key="sex" v-if="flag1"></el-table-column>
      <el-table-column prop="height" label="身高" align="center" key="height" v-if="flag2"></el-table-column>
      <el-table-column prop="address" label="城市" align="center"></el-table-column> 
    </el-table>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

拓展：关于 key Vue官方文档的说明