懒加载请求出来的数据 借用load方法直接添加到表格中,不会更新到当前行数据的children中,如果想更新数据,可以模拟load请求
页面元素
<el-table
:data="tableData"
:key="tableKey"
row-key="id"
stripe
border
ref="addressTable"
highlight-current-row
:current-row-key="currentRowKey"
:expand-row-keys="expandRowKeys"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
lazy
:load="childrenLoad"
@row-click="tableRowClick"
v-loading="loading"
>
定义一个map数据,存储懒加载数据集 maps: new Map()
load方法处理
childrenLoad (row, treeNode, resolve) {
// queryAddressList接口请求
this.queryAddressList(params).then(res => {
let arr = res.data.data || []
if (arr.length) {
arr.forEach(el => {
el.hasChildren = true
})
}
resolve(arr)
this.maps.set(row.dzbm, { row, treeNode, resolve })
})
},
更新节点懒加载数据方法
refreshLoadTree (dzbm) {
// 根据更改节点的父dzbm取出相应数据
const { row, treeNode, resolve } = this.maps.get(dzbm)
if (row) {
this.$set(
this.$refs.addressTable.store.states.lazyTreeNodeMap,
row.id,
[]
)
// 懒加载 load数据加载出来的 将取出对应数据再传给load方法
this.childrenLoad(row, treeNode, resolve)
}
},