elementUI中tree组件 懒加载之增删改查 使用_elementplus的树形控件懒加载进行节点删除操作

如果是elementUI中tree组件 懒加载看我之前写的个人感觉很清楚了
传送阵

废话不多说

 <el-tree
          class="filter-tree"
          :props="propsOne"
          :load="loadNode"
          lazy
          :filter-node-method="filterNode"
          highlight-current
          :expand-on-click-node="false"
          ref="tree">
        <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>
          <i class="el-icon-folder-opened" v-if="node.data.type === '0'"></i>
          <i class="el-icon-document" v-if="node.data.type === '1'"></i>
           {{ node.label }}</span>
        <span>
           <!-- 添加文件-->
             <el-button
               v-if="node.data.type === '0'"
               type="text"
               size="mini"
               @click="add(node,data)">
           <i class="el-icon-plus"></i>
          </el-button>
          <!--修改文件-->
          <el-button
            type="text"
            size="mini"
            @click="amend(node,data) ">
            <i class="el-icon-edit-outline"></i>
          </el-button>
          <!-- 下载文件-->
          <el-button v-if="node.data.type ==='1'"
                     type="text"
                     size="mini"
                     @click=" ">
            <i class="el-icon-download"></i>
          </el-button>
          <!-- 上传文件-->
          <el-button
            v-if="node.data.type === '0'"
            type="text"
            size="mini"
            @click="fileClick(node,data)">
            <i class="el-icon-upload"></i>
          </el-button>
          <!--删除文件-->
          <el-button
            type="text"
            size="mini"
            @click="del(node,data)" v-if="node.data.leaf">
            <i class="el-icon-delete"></i>
          </el-button>
        </span>
        </span>
        </el-tree>
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

 data() {
    return {
      propsOne: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf',
      }
    };
  },
 methods: {
 loadNode(node, resolve) {
      let arr = [];
      if (node.level === 0) {
        this.queryParams.parentId = 0;
        this.queryParams.fileType = 0;
      } else {
        this.queryParams.parentId = node.data.id;
        this.queryParams.fileType = 0;
      }
      listStores(this.queryParams).then(response => {
        this.loading = false;
        response.data.map(function (value) {
          arr.push({
            "name": value.fileName,
            "id": value.id,
            "leaf": value.leaf,
            "type": value.type,
            "fileType": value.fileType,
            "parentId": value.parentId,
          })
        });
        resolve(arr);
      });
    },
 }
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

修改后刷新

    //刷新父树结构
    this.node.parent.loaded = false;
    this.node.parent.expand();
1
2
3

之后的增删改查写方法就可以了，写自己的逻辑
效果