解决element表格的表头顺序错乱问题

Posted 2023-02-28 水星记_

项目场景：

需求是这样的，有一个表格，表头需要根据用户选择的类型动态显示或者隐藏，说白了，就是通过判断条件显示哪些列隐藏哪些列。

---

问题描述：

为了让大家更清晰的了解问题所在，咱们直接看下图操作：

---

原因分析：

从上图我们可以清晰的看到，当我们切换类型时，表格的表头就会出现顺序错乱的问题。出现该问题的主要原因是因为我们使用了 v-if 让每一列根据条件显隐，下面教大家一个最简单的办法解决此问题。

---

解决方案：

其实解决的方法也非常简单，我们只需要把表格的每一列绑定一个固定的 key 值，这个 key 可以是手动写的，当然也可以是当前列的 index 值，如下：

<el-table-column key="绑定的值"/>

实例

<el-table v-loading="loading" stripe border :data="dataList">
  <el-table-column key="1" v-if="codeType == '1' || codeType == '2'" prop="a" label="报警时间" align="center" />
  <el-table-column key="2" prop="b" label="设备编号" align="center" />
  <el-table-column key="3" prop="c" label="设备所属厂商" align="center" />
  <el-table-column key="4" v-if="codeType == '0'" prop="d" label="超标次数" align="center" />
  <el-table-column key="5" v-if="codeType == '0'" prop="e" label="超标比率" align="center" />
  <el-table-column key="6" v-if="codeType == '0'" prop="e" label="浓度超标比例" align="center" />
  <el-table-column key="8" v-if="codeType == '1' || codeType == '2'" prop="d" label="结束时间" align="center" />
  <el-table-column key="7" v-if="codeType == '1' || codeType == '2'" prop="e" label="持续时长（h）" align="center" />
  <el-table-column key="9" v-if="codeType == '1'" prop="e" label="报警期间行驶里程（km）" align="center" />
</el-table>

加上 key 值后的效果