ElementUi el-tree动态加载节点数据 load方法触发机制

Element UI的el-tree组件在使用动态加载节点时，可以通过load方法来获取并设置节点的子节点。load方法是当节点被展开且该节点的子节点还没有被加载时自动调用的。

以下是一个简单的例子，展示了如何使用load方法来动态加载节点数据：

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    :load="loadNode"
    lazy
  ></el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      treeData: [
        { id: 1, label: "节点1", loading: false }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    loadNode(node, resolve) {
      // 模拟一个异步请求
      setTimeout(() => {
        const data = [
          { id: 2, label: "节点1-1" },
          { id: 3, label: "节点1-2" }
        ];
        // 调用resolve传入回调数据
        resolve(data);
      }, 1000);
    }
  }
};
</script>

在这个例子中，loadNode方法是用来加载节点数据的。当节点1被展开时，loadNode会被触发，并且接收到当前节点的数据以及一个resolve函数。在loadNode内部，我们模拟了一个异步请求来获取子节点数据，并且在请求完成后调用resolve函数来更新节点数据。

注意，lazy属性需要设置在el-tree上以启用懒加载模式。此外，每个节点数据对象中的loading属性可以用来标记该节点当前是否正在加载子节点，这对于用户界面的显示非常有用。