el-table組件自帶的樹形數(shù)據(jù)與懶加載并不能滿足子表格組件展示字段與父表格組件展示字段不一致的需求,所以選擇采用展開行 + expand-change事件來實(shí)現(xiàn)
實(shí)現(xiàn)中遇到的問題
通過展開行+ expand-change實(shí)現(xiàn)時(shí),遇到一個(gè)很大的問題,就是el-table組件在更新數(shù)據(jù)內(nèi)部某個(gè)屬性值時(shí),并不能實(shí)時(shí)刷新dom視圖,這樣會導(dǎo)致每次在expand-change事件中獲取到內(nèi)層表格數(shù)據(jù)后蒂教，給父層數(shù)據(jù)中添加屬性時(shí)視圖并未刷新
解決方法
需要在獲取父層表格數(shù)據(jù)時(shí)，添加一個(gè)子層表格數(shù)據(jù)的屬性值（事先聲明）脆荷，然后在expand-change事件中給該屬性賦值凝垛，這樣el-table就能識別出數(shù)據(jù)變化并實(shí)時(shí)更新視圖.在給table綁定的數(shù)組變量賦值之前,就給子層把需要更新的變量設(shè)置好(例子中的loadDetails)
if (res.status == 200) {
const arr = res.data
arr.forEach(ele => {
ele.objCountList = []
ele.loadDetails = false
})
this.tableData = arr
}
if (res.status == 200) {
this.tableData.forEach((ele, idx) => {
if (ele.id == row.id) {
row.objCountList = res.data
this.$set(row, 'loadDetails', true)
}
})
}
