Element-UI：tree结构 实现懒加载案例

前言

在我们实际开发中，由于后端返回的节点数据量庞大，而用户往往没有要看到所有数据的需求，如果在页面加载中，将页面的所有节点数据都加载出来，无疑是浪费用户宝贵的时间。
    因此，就有了节点的懒加载的需求，用户想展开哪个节点，我们就给他展示什么数据（异步的从后台发送请求获取当前节点数据然后进行渲染）

Demo 逻辑简单介绍：点击当前节点调用后端接口，加载节点的下级数据
实现效果：

<el-tree
  :props="props" // 展示你的数据信息
  :load="loadNode" // 与lazy配合使用
  lazy // 开启懒加载
  show-checkbox  // 是否开启复选框
  >
</el-tree>

<script>
  export default {
    data() {
      return {
        props: {
          label: 'name',  // 指定节点标签在页面上展示的名称
          children: 'children', 
          isLeaf: 'leaf' // 指定节点是否为叶子节点
        },
      };
    },
    methods: {
      // 懒加载数据实现方法
      loadNode(node, resolve) {
        let id = node.level === 0 ? 0 : node.data.id;
      	let level = node.level === 0 ? 0 : node.level;
      	let parentID = node.level === 0 ? 0 : node.data.parentID;
      	// getFilterTreeApi 是后端接口，根据自己项目更改
      	const res = await getFilterTreeApi(id, level, parentID);
      	if (res.code === 200) {
        	let arr = res.data.map((item) => {
          		return {
            		id: item.id,
            		name: item.displayName,
            		leaf: !item.leaf,
            		disabled: node.level > 1 ? false : true,
            		parentID: item.parentID,
          		};
        	});
        	resolve(arr); //将数据渲染到tree中
      	} else {
        	this.$message.error(res.msg);
        	resolve([]);
      	}
      }
    }
  };
</script>