vue中el-tree实现懒加载、动态增删改

最新推荐文章于 2025-10-29 09:46:17 发布

原创最新推荐文章于 2025-10-29 09:46:17 发布 · 3.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue

VUE 同时被 2 个专栏收录

2 篇文章

订阅专栏

Element

1 篇文章

订阅专栏

本文介绍了在Vue项目中利用ElementUI的el-tree组件实现懒加载和动态增删改组织树节点的方法。通过设置`ref`、`load`和`lazy`属性，结合组件提供的`expand`、`refreshNodeBy`或`loadNode`方法，实现了数据量大的情况下高效的操作树形结构。文章提供了两种实现方式的模板和方法代码示例。

前言

在最近的一个项目中，有一个组织树的需求，效果图：
在这里插入图片描述

因为数据量比较大，要求懒加载并且能够在树上对组织进行操作，项目使用的是vue+ElementUI。ElementUI中有个el-tree，正好可以拿来用。项目引入ElementUI什么的就不说了，大家都知道，直接使用el-tree实现需求吧。

首先看下ElementUI中关于el-tree懒加载的介绍
关键的就是ref、load和lazy属性，于是开始写代码
第一种：
template中：

<el-tree
	ref="asyncTree"
    lazy
    :props="props"
    :load="loadNode"
    :node-key="id"
   ></el-tree>

methods中：

 refreshNodeBy(id){
	let node = this.$refs.asyncTree.getNode(id); // 通过节点id找到对应树节点对象
	console.log(node, 'refreshNodeBy')
	node.loaded = false; 
	node.isLeaf = false;
	node.expand(); // 主动调用展开节点方法，重新查询该节点下的所有子节点
}

只要是找到对应的树节点，使用expand方法，最后在需要刷新某个节点的时候，主动调用refreshNodeBy这个方法。

第二种：
template中：

<div class="pollutionsource-true">
   <el-button type="primary" size="small" @click="addNode()">添加排污口类型</el-button>
	<el-tree
	    lazy
	    :props="props"
	    :load="loadNode"
	    default-expand-all
	    highlight-current
	    @node-click="handleNodeClick"
	    style="margin-bottom:10px;"
	  ></el-tree>
	  <el-button type="primary" size="mini" @click="editNode()">编辑</el-button>
	  <el-button type="danger" size="mini" @click="deletetype()">删除</el-button>
</div>

methods中：

loadNode(node, resolve) {
	if (node.level === 0) {
				return resolve([{ name: "污染源类型", id: 0 }]);
      } else if (node.level === 1) {
				Sewageoutlet().then(val => {
					// console.log(val, "11");
          const nodes = val.data.map(res => ({
						name: res.outfallTypeName,
            level: node.level,
            value: res
          }));
          // console.log(nodes,'nodes')
          resolve(nodes);
					this.node = node
					this.resolve = resolve
        });
      } else {
        return resolve([]);
      }
		}

node、resolve要先保存下来，最后在需要刷新某个节点的时候，主动调用loadNode（node, resolve）这个方法。

名言警句：处事不必求功，无过便是功。为人不必感德，无怨便是德。