Element UI 的 el-table表头出现列数据错乱现象,只需要加一个key属性就能解决问题。

问题描述:

el-table表头数据出现“乱跳”现象,例如:序号本应该在第一列,它可能在tab切换之后蹦到了第五列。

问题分析:

这个问题通常是由于在使用 Element UI 的 el-table 组件时,列(el-table-column)的顺序与你预期数据顺序的不一致导致的。

解决方案:

给每一个 el-table-column 加一个key属性,按预期的顺序由小到大排列。

<el-table-column key="1" type="selection" width="55"  />
<el-table-column key="2" type="index" align="center" label="序号" width="100" />
<el-table-column key="3" align="center" prop="time" label="时间" width="160" />
<el-table-column key="4" align="center" prop="site" label="站点" width="240"/>
...