问题:

  在table中根据不同数据显示的行列数量以及数据不同导致表格中数据错乱问题。

在第一次打开表格时数据显示是正确的,如图1所示

图1:

elemenUI——table表格内容错乱_加载

但是当切换数据更多数据源进行显示时数据就会开始发生错乱,如图2所示

图2:

elemenUI——table表格内容错乱_数据_02

图2中的课程代码,课程名称都是错误的引用了其他列的数据进行显示的,当我们再次打开图1所示数据源时,也会发生错误,如图3所示

图3:

elemenUI——table表格内容错乱_多数据源_03

当我们再次打开图2数据源,发现更多的数据列发生了错误

图4:

elemenUI——table表格内容错乱_数据源_04

原因:

  部分DOM不会重新渲染,导致table变化时内容错乱。(这里的原因是我自己觉得的,没有任何证据证明勿喷)

解决办法:

  在发现问题后使用table表格的doLayout()进行重新加载渲染也无济于事,于是在一篇大佬的文章中发现了解决的办法,就是column列设置key值,该问题就解决了。

例如:

 

<el-table>
    <el-table-column
         label="学号"
         :key="Math.random()"
    >
    </el-table-column>
</el-table>