业务场景:列表已经渲染的数据,但是此时有数据项数据选择更改,期望表格动态更新
尝试了nextTick和强制刷新,效果和页面加载使用不舒服,
解决方法:
在el-table中设置key值,重新赋值表格数据之后,更新key值,达到动态更新效果
原理:类似路由路径后加key值来达到刷新目的,猜测是dom树diff时候检测key值发生了变化更新了数据

<el-table
        id="table"
        ref="table"
        :key="tableKey"
        border
        :header-cell-style="{background:'#fafafa'}"
        :data="arrAddTable"
      >


// 在tableData赋值的地方,顺便随机设置下key,页面就会刷新了
this.arrAddTable = this.arrAddTable
this.tableKey = Math.random()

参考原文:el-table表格数据变化,页面不更新问题

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐