Vue：eliment-ui el-tree动态加载更新

最近在数据源管理功能，需要以树的形式异步展现：

 

 

根节点可以新增目录。

目录节点可以新增目录，编辑目录，新增主数据。

主数据节点无操作按钮。

找到element-ui的官方文档，el-tree。（地址：http://element-cn.eleme.io/#/zh-CN/component/tree ）

    结合自定义节点内容：

 

1.节点后添加操作按钮

?
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
renderContent(h, { node, data }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            <i
              v-show={
                node.level == 1 || data.nodeType == FunctionNodeType.BizFolder
              }
              class="el-icon-plus"
              title="新增目录"
              on-click={() => this.editBizFolder(node, "add", resolve)}
            />
            <i
              v-show={data.nodeType == FunctionNodeType.BizFolder}
              class="el-icon-edit"
              title="编辑目录"
              on-click={() => this.editBizFolder(node, "edit")}
            />
            <i
              v-show={data.nodeType == FunctionNodeType.BizFolder}
              class="el-icon-document"
              title="添加主数据"
              on-click={() => this.addBizObject(node)}
            />
          </span>
        </span>
      );
    }

　　

2. 默认根节点是展开的

?
1
2
3
4
5
6
7
8
9
10
11
12
<el-tree
        :data="data"
        :props="defaultProps"
        :highlight-current="true"
        :load="loadDataTree"
        lazy
        :expand-on-click-node="false"
        :render-content="renderContent"
        node-key="id"
        :default-expanded-keys="['1']"
        @node-click="nodeClick"
      ></el-tree>

标红处为关键代码

3. 动态添加,更新后刷新节点

append方法肯定是不行的，添加完成后，需要重新拉取查询子节点的接口,这个方法放弃了，

缓存resolve方法，这个方法也是不可取的，this的指向会发生问题(展开节点a再点击b节点的新增目录)，这个方法也必须得放弃。

element-ui提供了 doCreateChildren(children, defaultProps)方法创建子节点

children就是你需要动态添加的数据。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
reloadNode(node) {
      DataSourceService.getDataTree(node.data.objectId).then(
        res => {
          if (res.data && res.data.length > 0) {
            let rootChildren = [];
            res.data.forEach(element => {
              rootChildren.push({
                name: element.Text,
                leaf: element.IsLeaf,
                objectId: element.ObjectID,
                code: element.Code,
                nodeType: element.NodeType,
                sortKey: element.SortKey,
                children: []
              });
            });
            node.childNodes = [];　　//清空节点
            node.doCreateChildren(rootChildren);　　//更新节点
          }
        }
      )

 

4.最终代码

?
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!-- 外部数据源 -->
<template>
  <div id="master-data">
    <div class="master-data-tree">
      <el-tree
        :data="data"
        :props="defaultProps"
        :highlight-current="true"
        :load="loadDataTree"
        lazy
        :expand-on-click-node="false"
        :render-content="renderContent"
        node-key="id"
        :default-expanded-keys="['1']"
        @node-click="nodeClick"
      ></el-tree>
    </div>
    <div class="master-data-info">
      
    </div>
  </div>
</template>
 
<script>
 
import DataSourceService from "@/services/data-source.service";
import FunctionNodeType from "@/models/data-source/function-node-type.js";
 
 
export default {
  name: "master-data",
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
        isLeaf: "leaf"
      }
    };
  },
  components: {
  },
  computed: {},
  methods: {
    loadDataTree(node, resolve) {
      if (node.level === 0) {
        return resolve([{ id: "1", name: "主数据", objectId: "" }]);
      }
      DataSourceService.getDataTree(node.data.objectId).then(
        res => {
          if (!res.status) {
            return;
          }
          let rootChildren = [];
          if (res.data && res.data.length > 0) {
            res.data.forEach(element => {
              rootChildren.push({
                name: element.Text,
                leaf: element.IsLeaf,
                objectId: element.ObjectID,
                code: element.Code,
                nodeType: element.NodeType,
                sortKey: element.SortKey,
                children: []
              });
            });
          }
          if (resolve) {
            resolve(rootChildren); //动态加载时
          } else {
            //更新节点时：
            node.childNodes = [];
            node.doCreateChildren(rootChildren);
          }
        }
      );
    },
    renderContent(h, { node, data }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            <i
              v-show={
                node.level == 1 || data.nodeType == FunctionNodeType.BizFolder
              }
              class="el-icon-plus"
              title="新增目录"
              on-click={() => this.editBizFolder(node, "add", resolve)}
            />
            <i
              v-show={data.nodeType == FunctionNodeType.BizFolder}
              class="el-icon-edit"
              title="编辑目录"
              on-click={() => this.editBizFolder(node, "edit")}
            />
            <i
              v-show={data.nodeType == FunctionNodeType.BizFolder}
              class="el-icon-document"
              title="添加主数据"
              on-click={() => this.addBizObject(node)}
            />
          </span>
        </span>
      );
    },
    editBizFolder(node, type) {
      // 新增编辑目录
      event.stopPropagation(); // 阻止冒泡给nodeClick
      const data = node.data;
      const parentData = node.parent.data;
      const title = type == "add" ? "新增目录" : "编辑目录";
      //...弹窗逻辑，保存后回调
　　const refreshNode = type == "add" ? node : node.parent;
      this.loadDataTree(refreshNode);　　//刷新节点
    },
    nodeClick(data) {
      debugger;
      // 点击树
    }
  }
};
</script>
<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.custom-tree-node i {
  margin-left: 10px;
}
#master-data {
  height: 100%;
  flex: 1;
  flex-direction: row;
  display: flex;
}
.master-data-tree {
  width: 270px;
  border-right: 1px solid #dcdfe6;
}
.master-data-info {
  width: 100%;
  margin-left: 20px;
}
</style>

　　

另el-tree的一些基本方法...

（可参考element-ui源码node_modules\element-ui\packages\tree\src\model\node.js 和tree-store.js）

1.设置展开和收缩
?
1
2
3
4
5
if (!node.expanded) {
    node.expand();
} else {
    node.collapse();
}

2.获取父节点

?
1
node.parent

　　

 

posted @   齐大齐  阅读(28344)  评论(2)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示