关于Element Table异步请求时监听不到数据改变的解决方案

最新推荐文章于 2024-08-09 21:02:54 发布

xyang_1128

最新推荐文章于 2024-08-09 21:02:54 发布

阅读量1.9k

点赞数 2

分类专栏：解决问题总归文章标签： vue javascript elementui

本文链接：https://blog.csdn.net/qq_40794266/article/details/113179875

版权

11 篇文章 2 订阅

订阅专栏

Element Table

官方描述：用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

以下案例是一个实际的开发Demo，实现的功能点如下

编辑变色

在这里插入图片描述

tableRowClassName({row, rowIndex}) {
        if (row.modify) {
          return 'warning-row';
        }
        return '';
}

自定义列

在这里插入图片描述

在修改页面内容输入的组件中加入change监听事件，参数是row

modify（row， index）{
	row.modify = true
}

保存成功后重置状态
在这里插入图片描述

在这里插入图片描述

此时已经保存成功，并且vue的数据已经重置，表格未刷新，需要再次修改内容才能刷新
在这里插入图片描述

由于异步操作，导致el-table没有监听到数据改变，所有解决方案是手动调用el-table的刷新
但是网上并没有相关的解决的方案，所以只能翻寻源码
el-table的源码地址

最终找到了store.updateColunms() 方法
异步操作新增刷新代码：
在这里插入图片描述

问题解决

关注

专栏目录