当前位置: 首页 > Web前端 > vue.js

ElementUI表格组件展开展开,动态更新数据时,视图不会自动更新

时间:2023-03-31 18:47:51 vue.js

这是因为给表数据赋值时展开视图对应的字段不存在。(动态增加属性)拿到表数据后,先初始化扩展字段,然后赋值,问题就解决了~~比如之前:this.list=api.getList()改为:letlist=api.getList()list.forEach((item)=>{item.detail=''//假设展开的字段是detail})this.list=list我的实际代码大概是这样的,一张表设置另一个表先调一个接口获取list的数据,再drop另一个接口获取list[i].subTable的数据,第一个接口的数据没有subTable字段,所以view是后面赋值的时候不会自动更新,第一次获取数据的时候给每个数据加上这个字段method:{////获取外表数据asyncgetList(){letparams={page:this.page,}letres=awaittask.getTaskList(params)/*这里是要添加的代码,只添加展开的字段*/res.rows.forEach(row=>{row.subTable=[]row.total=0})this.list=res.rowsthis.total=res.total},////获取展开的子表数据asyncgetSubtable(row){letparams={id:row.id,page:row.page}if(!row||!row.id){return}letres=awaittask.getSubtable(params)row.subTable=res.rowsrow.total=res.total},}----------------分割线,下面的内容是之前写的,可以解决问题,但是这个方法不行ok------------------更新数据后,只要调用这个.$refs.table.toggleRowExpansion()///////这不是“正确”的解决方案只是我尝试了很多次后尝试的hack,正好解决了问题。。。//////看源码,调用toggleRowExpansion方法,就会调用this.scheduleLayout()在源代码中;调用this.table.debouncedUpdateLayout();然后视图就更新了……这样一个页面:,page:row.page}letres=awaittask.getSubTable(params)row.detail=res.rowsrow.total=res.totalthis.$refs.table.toggleRowExpansion()},