解决el-table 子节点懒加载删除,操作成功后不刷新

 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", {});

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值