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

前言

在最近的一个项目中，有一个组织树的需求，效果图：

因为数据量比较大，要求懒加载并且能够在树上对组织进行操作，项目使用的是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(); // 主动调用展开节点方法，重新查询该节点下的所有子节点
}

只要是找到对应的树节点