赞
踩
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", {});
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。