el-table数据变化更新页面表格

业务场景:列表已经渲染的数据,但是此时有数据项数据选择更改,期望表格动态更新
尝试了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表格数据变化,页面不更新问题

猜你喜欢

转载自blog.csdn.net/qq_45659769/article/details/126701303