element表格头乱序？试试这种方法

前言

当我们在使用 el-table 组件来展示数据时，表头的顺序通常是非常重要的。然而，有时候我们可能会遇到 el-table 表头乱序的情况，这给我们的数据展示和分析带来了一些困扰。在本文中，我们将探讨一些解决这个问题的方法，以帮助我们更好地展示和分析数据。下面一起来看看吧！

---

项目场景

需求：表格的表头需求根据用户选择的类型动态的展示，其实说白了就是通过判断条件显示哪些列隐藏哪些列。

---

问题描述

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

---

原因分析

从上图我们可以清晰的看到，当我们切换类型时，表格的表头就会出现顺序错乱的问题。出现该问题的主要原因是因为我们使用了 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 值后的效果