html表格内容自动更新,ElementUI table 组件展开 expand，动态更新数据时，视图没有自动更新...

这是因为在给table的数据赋值时，展开的视图对应的字段不存在。(动态增加属性)

拿到table数据后，先把展开字段初始化，然后再赋值，问题就解决了~~

比如，之前是：this.list = api.getList()

改成：let list = api.getList()

list.forEach((item)=>{

item.detail = '' // 假设展开的字段是detail

})

this.list = list

我实际的代码大概是这样的，一个table套另一个table

:data="list"

@expand-change="onExpandChange">

{{scope.row.name}}

:current-page="scope.row.page||1"

:total="scope.row.total||0"

@current-change="(page)=>onSubtablePageChange(page, scope.row)">

先调一个接口拿list的数据，然后再掉一个接口拿list[i].subTable的数据，第一个接口的数据没有subTable这个字段，所以后来再赋值的时候视图没有自动更新，只要在第一次拿数据的时候给每个数据加上这个字段就可以了method: {

拿外层table数据

async getList() {

let params = {

page: this.page,

}

let res = await task.getTaskList(params)

/*这里是要加的代码，把展开的字段加上去就好了*/

res.rows.forEach(row => {

row.subTable = []

row.total = 0

})

this.list = res.rows

this.total = res.total

},

拿展开的subtable数据

async getSubtable(row) {

let params = {

id: row.id,

page: row.page

}

if (!row || !row.id) {

return

}

let res = await task.getSubtable(params)

row.subTable = res.rows

row.total = res.total

},

}

-----------------分割线，下面的内容是之前写的，能解决问题，但是这种方法不好------------------

在更新数据后，调用一下this.$refs.table.toggleRowExpansion()就好了

/// 这不是“正确”的解决方法，只是我做了很多尝试之后试出来的一个 hack，很凑巧地能解决问题……

// 看源码，调用 toggleRowExpansion 方法，源码里会调用this.scheduleLayout(); 再调用 this.table.debouncedUpdateLayout(); 然后视图就更新了……

这样的页面：

代码：

// 省略其他代码

>

async getSubTable(row) {

let params = {

id: row.id,

page: row.page

}

let res = await task.getSubTable(params)

row.detail = res.rows

row.total = res.total

this.$refs.table.toggleRowExpansion()

},