1.注意一个变量名称 this.$refs.pointMultipleTable需要配置到table中
<el-table
ref="pointMultipleTable"
:data="pointTableData"
:loading="pointLoading"
@select="isCheck"
@select-all="isCheckAll"
row-key="id"
stripe
border
lazy
:load="load"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>"
</el-table>
2.后端返回的父级数据
getProblemPointListFind(params).then(({ data: res }) => {
// 1 给原始对象数组的每个对象加 id
// 2.给展开项的属性hasChildren赋值为true(这里为了防止展开时每行都会展开)
res.data.list.forEach((item, index) => {
// ‘15984401778’这个是唯一标识,每个子级数据结构里也要有相对应的父级值
item.id = item.pointSerialNo
item.hasChildren = true
})
this.pointTableData = res.data.list
})
3.在data中定义一个maps
data(){
return:{
deleteAll:[],
maps: new Map(),
}
}
4.加载子级数据
load(tree, treeNode, resolve) {
// 这里的id就是父级数据的item.pointSerialNo
// 将tree,treeNode,resolve通过id绑定到maps中
this.maps.set(tree.id, { tree, treeNode, resolve })
const param = {
pointSerialNo: tree.pointSerialNo
}
// 子级的后端数据列表
problemFindByPoint(param).then(res => {
var resArr = []
if (res.data.code === '0000') {
resArr = res.data.data.list
}
return resolve(resArr) // 为数据类型
})
},
5.选择
// 勾选单个
isCheck(selection, row) {
this.deleteAll = selection
},
// 全选
isCheckAll(selection, row) {
this.deleteAll = selection
},
6.调用批量删除函数
// 确定按钮
sumbit(){
var arr = []
var parentIdArr = []
this.deleteAll.forEach(item => {
arr.push(item.assetsSerialNo)
parentIdArr.push(item.pointSerialNo)
})
this.batchDelFun(arr, parentIdArr)
}
7. 批量删除
atchDelFun(arr, parentIdArr) {
postBatchDelFun(params).then(res => {
res = res.data
parentIdArr.forEach(item => {
// 循环父级pointSerialNo唯一标识,也是id
const { tree, treeNode, resolve } = this.maps.get(item) // 根据父级id取出对应的节点数据
this.load(tree, treeNode, resolve) // this.load为第四步
})
})
},
8.核心部分为 (第七步为正式操作)
const { tree, treeNode, resolve } = this.maps.get(item)
9.切换到其他子模块,返回时单纯的更新绑定的数据
在重新加载时,清空对应ref
下的这两个数据,无论少清除哪一个,都会有问题
// lazyTreeNodeMap和treeData都是固定值
this.$set(this.$refs["pointMultipleTable"].store.states, "lazyTreeNodeMap", {});
this.$set(this.$refs["pointMultipleTable"].store.states, "treeData", {});