element-plus el-table树形 懒加载 新增、删除等局部刷新_vue3.0+ts setup elementplus el-table 树形数据懒加载lazy子节

1.el-table 代码

<el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      ref="table"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="date" label="Date" />
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="address" label="Address" />
      <el-table-column prop="action" label="操作">
            <template #default="scope">
              <el-button
                type="primary"
                link
                @click.prevent="addSubsetClick (scope.$index, scope.row)"
                >新增</el-button
              >
              <el-button
                type="danger"
                link
                @click.prevent="deleteClick(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
    </el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

2.vue3代码

import {add, sonList } from "@/api/xxx";
const tableData = ref([
{
    id: 3,
    date: '2016-05-01',
    name: 'wangxiaohu',
    hasChildren: true,
    address: 'No. 189, Grove St, Los Angeles',
    parentId:"0"
  }])
const table = ref()
const loadMap = new Map();
const load = (row, treeNode, resolve: (date) => void) => {
  loadMap.set(row.id, { row, treeNode, resolve });
  /*子集接口*/
  /*sonList({ parentId: row.id }).then(res => {
    let data = res.data;
    resolve(data);
  });*/
  setTimeout(() => {
    resolve([
      {
        id: 31,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
        hasChildren:false,
        parentId:"3"
      },
      {
        id: 32,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
        hasChildren:false,
        parentId:"3"
      },
    ])
  }, 1000)
};

//新增子级
const addSubsetClick = (index, item) => {
//我遇到一个坑，子集删除完再次添加报错，修改在下面
//add({/*接口条件*/}).then(res => {
//        if (res.code == 1) { 
//         if (loadMap.get(item.id)) {
//		     const { row, treeNode, resolve } = loadMap.get(item.id);
			/*报错部分修改*/
//    		 table.value.store.states.lazyTreeNodeMap.value[item.id].push({});
//		     load(row, treeNode, resolve);
//		   }
//      });
//};

 if (loadMap.get(item.id)) {
    const { row, treeNode, resolve } = loadMap.get(item.id);
    /*报错部分修改*/
    table.value.store.states.lazyTreeNodeMap.value[item.id].push({});
    load(row, treeNode, resolve);
    }
}
//删除
const deleteClick = (index, item) => {
	const { row, treeNode, resolve } = loadMap.get(item.parentId);
	if (table.value.store.states.lazyTreeNodeMap.value[item.parentId].length > 1) 			   {
      //说明该节点下有多个子节点
       table.value.store.states.lazyTreeNodeMap[item.parentId] = [];
     } else {
       //说明该节点只有一个节点
       table.value.store.states.lazyTreeNodeMap.value[
         item.parentId
       ] = [];
     }
     load(row, treeNode, resolve);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

完结，持续维护…