elementUI tree动态添加节点

最新推荐文章于 2024-04-17 16:21:59 发布

原创最新推荐文章于 2024-04-17 16:21:59 发布 · 3.6k 阅读

0 ·

CC 4.0 BY-SA版权

element-ui 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了一种基于axios和Vue.js的动态树状数据结构构建方法，通过递归调用getTree函数，从服务器获取数据并实时更新树节点。文章深入解析了如何判断节点是否为叶子节点，以及如何在树的层级结构中正确设置默认展开节点。

getRootTree(data) {
                let node = this.$refs.tree.getNode(this.statItemId)
                console.log(node)
                if(this.map.get(this.statItemId)){
                    this.getTree(this.statItemId, this.map.get(this.statItemId), node);
                }else {
                    node.isLeaf = false;
                    node.isLeafByUser= false;
                    node.childNodes = []
                    this.getTree(this.statItemId, '', node);
                }
			},
			getTree(code, resolve, node, callBack) {
				this.$axios
					.get("/project/statItemDict/getStatItemTree?parentId=" + code)
					.then(res => {
						let result = res.data.data;
                            result.map(item => {
							if (item.childNum == 0) {
								item.leaf = true;
							}
						})
                        if (node.level === 0) {
                            this.$nextTick(() => {
                                this.statItemId = result[0].statItemId
                                this.defaultExpand.push(result[0].statItemId)
                                this.$refs.tree.setCurrentKey(result[0].statItemId)
                                this.$refs.countTable.getTbaleData(result[0].statItemId, result[0], node, false, resolve);
                            })
                        }
                        if(!resolve) {
                            node.childNodes = result
                            return
                        }
                        resolve(result);
					})
			},