【 elementUI---Tree树形控件 】---懒加载自定义子节点

在Element UI的Tree组件中，如果需要自定义懒加载的子节点，可以通过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) {
      // 假设你有一个方法来获取子节点数据
      if (node.level === 0) {
        return resolve([{ id: 2, label: "节点1-1", leaf: false }]);
      }
      if (node.level > 0) {
        setTimeout(() => {
          const childNodes = [
            { id: node.data.id + '1', label: `${node.data.label}-1`, leaf: node.level >= 2 },
            { id: node.data.id + '2', label: `${node.data.label}-2`, leaf: node.level >= 2 }
          ];
          // 调用resolve传入子节点数据
          resolve(childNodes);
        }, 1000);
      }
    }
  }
};
</script>

在这个例子中，loadNode方法是用来懒加载节点的。当节点被展开时，Tree组件会调用这个方法。node参数包含了当前节点的信息，而resolve函数用来将子节点数据传回组件。

注意，在实际应用中，setTimeout用来模拟异步加载数据，leaf属性用来指示节点是否为叶子节点，实际应用中应该根据后端返回的数据来设置这些属性。如果节点是叶子节点，它将不会有子节点，否则它将在需要时加载子节点。