当前位置:   article > 正文

解决el-table 子节点懒加载删除,操作成功后不刷新_el-table删除树形数据,去掉展开按钮懒加载

el-table删除树形数据,去掉展开按钮懒加载

 1.注意一个变量名称 this.$refs.pointMultipleTable需要配置到table中

  1. <el-table
  2. ref="pointMultipleTable"
  3. :data="pointTableData"
  4. :loading="pointLoading"
  5. @select="isCheck"
  6. @select-all="isCheckAll"
  7. row-key="id"
  8. stripe
  9. border
  10. lazy
  11. :load="load"
  12. :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  13. >"
  14. </el-table>

2.后端返回的父级数据

  1. getProblemPointListFind(params).then(({ data: res }) => {
  2. // 1 给原始对象数组的每个对象加 id
  3. // 2.给展开项的属性hasChildren赋值为true(这里为了防止展开时每行都会展开)
  4. res.data.list.forEach((item, index) => {
  5. //15984401778’这个是唯一标识,每个子级数据结构里也要有相对应的父级值
  6. item.id = item.pointSerialNo
  7. item.hasChildren = true
  8. })
  9. this.pointTableData = res.data.list
  10. })

3.在data中定义一个maps

  1. data(){
  2. return:{
  3. deleteAll:[],
  4. maps: new Map(),
  5. }
  6. }

4.加载子级数据

  1. load(tree, treeNode, resolve) {
  2. // 这里的id就是父级数据的item.pointSerialNo
  3. // 将tree,treeNode,resolve通过id绑定到maps中
  4. this.maps.set(tree.id, { tree, treeNode, resolve })
  5. const param = {
  6. pointSerialNo: tree.pointSerialNo
  7. }
  8. // 子级的后端数据列表
  9. problemFindByPoint(param).then(res => {
  10. var resArr = []
  11. if (res.data.code === '0000') {
  12. resArr = res.data.data.list
  13. }
  14. return resolve(resArr) // 为数据类型
  15. })
  16. },

5.选择

  1. // 勾选单个
  2. isCheck(selection, row) {
  3. this.deleteAll = selection
  4. },
  5. // 全选
  6. isCheckAll(selection, row) {
  7. this.deleteAll = selection
  8. },

6.调用批量删除函数

  1. // 确定按钮
  2. sumbit(){
  3. var arr = []
  4. var parentIdArr = []
  5. this.deleteAll.forEach(item => {
  6. arr.push(item.assetsSerialNo)
  7. parentIdArr.push(item.pointSerialNo)
  8. })
  9. this.batchDelFun(arr, parentIdArr)
  10. }

7. 批量删除

  1. atchDelFun(arr, parentIdArr) {
  2. postBatchDelFun(params).then(res => {
  3. res = res.data
  4. parentIdArr.forEach(item => {
  5. // 循环父级pointSerialNo唯一标识,也是id
  6. const { tree, treeNode, resolve } = this.maps.get(item) // 根据父级id取出对应的节点数据
  7. this.load(tree, treeNode, resolve) // this.load为第四步
  8. })
  9. })
  10. },

8.核心部分为 (第七步为正式操作)

const { tree, treeNode, resolve } = this.maps.get(item)

9.切换到其他子模块,返回时单纯的更新绑定的数据

在重新加载时,清空对应ref下的这两个数据,无论少清除哪一个,都会有问题

  1. // lazyTreeNodeMap和treeData都是固定值
  2. this.$set(this.$refs["pointMultipleTable"].store.states, "lazyTreeNodeMap", {});
  3. this.$set(this.$refs["pointMultipleTable"].store.states, "treeData", {});

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/107569
推荐阅读
相关标签
  

闽ICP备14008679号