ElementUI 表格 el-table，在大量使用 v-if 时列表渲染出现错乱，要么 A 列的数据显示在 B 列上，要么后端有数据的但是显示的为空

值，我一般习惯使用字段名，也可以随机生成一个值，只要具有唯一性就可以。作为唯一标识，这样渲染的时候就不会因为复用原则导致列数据混乱了。来控制显示隐藏时，就会出现列数据错乱的情况。当 el-table 表格上的列。

Lynn_lmm

1715人浏览 · 2023-06-14 17:34:11

Lynn_lmm · 2023-06-14 17:34:11 发布

ElementUI 表格 el-table，在大量使用 v-if 时列表渲染出现错乱，要么 A 列的数据显示在 B 列上，要么后端有数据的但是显示的为空

场景背景：

当 el-table 表格上的列el-table-column需要根据不同条件v-if来控制显示隐藏时，就会出现列数据错乱的情况

举个例子：

<el-table border:data="dataList">
  <el-table-column align="center" label="姓名" prop="name"></el-table-column>
  <el-table-column
    align="center"
    label="年龄"
    prop="age"
    v-if="isShow"
  ></el-table-column>
  <el-table-column
    align="center"
    label="日期"
    prop="date"
    v-if="!isLoading"
  ></el-table-column>
  <el-table-column align="center" label="城市" prop="city"></el-table-column>
  <el-table-column align="center" label="地址" prop="address"></el-table-column>
</el-table>

上面的代码里多个el-table-column上存在使用v-if控制表格列的显示隐藏，就会导致表格渲染时出现错位现象，如图：

解决方法

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

<el-table border:data="dataList">
  <el-table-column align="center" label="姓名" prop="name"></el-table-column>
  <el-table-column
    align="center"
    label="年龄"
    prop="age"
    key="age"
    v-if="isShow"
  ></el-table-column>
  <el-table-column
    align="center"
    label="日期"
    prop="date"
    key="date"
    v-if="!isLoading"
  ></el-table-column>
  <el-table-column align="center" label="城市" prop="city"></el-table-column>
  <el-table-column align="center" label="地址" prop="address"></el-table-column>
</el-table>