vue中使用element table,动态列渲染异常(错行问题、数据不更新),已解决

说明

1、el-table-column 动态渲染
2、粘贴element的源码,一试发现没有问题,对比我自己代码,添加上height="500",再添加动态列,高度异常


高度渲染异常

3、解决办法,刷新组件,调用doLayout对table进行重新绘制(ps:不加nextTick可能会无效呦)

this.$nextTick(() => {
  this.$refs.singleTable.doLayout()
})

4、可歌可泣,终于摆脱了以前 用v-if强制刷新表格的情况,接下来我碰到的问题是 列的数据改了,但是table不更新


修改列数据

5、对比网上查询和大佬说的话 是需要加key的,所以我尝试修改key,最后成功了(开心~~~)

v-for="(tableHeaderItem,tableHeaderIndex) in allData.tableHeader"
:key="tableHeaderIndex+Math.random()"

demo







你可能感兴趣的:(vue中使用element table,动态列渲染异常(错行问题、数据不更新),已解决)