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

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-elseel-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>
  • 6
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值