这是因为在给table的数据赋值时,展开的视图对应的字段不存在。(动态增加属性)
拿到table数据后,先把展开字段初始化,然后再赋值,问题就解决了~~
比如,之前是:
this.list = api.getList()
改成:
let list = api.getList()
list.forEach((item)=>{
item.detail = '' // 假设展开的字段是detail
})
this.list = list
我实际的代码大概是这样的,一个table套另一个table
<template>
<el-table ref="table"
:data="list"
@expand-change="onExpandChange">
<el-table-column type="expand">
<template slot-scope="scope">
<el-table :data="scope.row.subTable" size="small">
<el-table-column label="姓名">
<template slot-scope="scope">
{{scope.row.name}}
</template>
</el-table-column>
</el-table>
<el-pagination layout="prev,pager,next"
:current-page="scope.row.page||1"
:total="scope.row.total||0"
@current-change="(page)=>onSubtablePageChange(page, scope.row)"></el-pagination>
</template>
</el-table-column>
</el-table>
</template>
先调一个接口拿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(); 然后视图就更新了……
这样的页面:
代码:
<el-table ref="table"
// 省略其他代码
></el-table>
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()
},
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。