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) {
      // 假设你有一个获取子节点数据的API
      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方法是懒加载的回调函数。当节点被展开时，loadNode会被调用，并且节点的data和一个resolve函数会被传入。你可以使用节点的数据（如id或label）去请求子节点数据，并在数据获取完成后调用resolve函数。

注意，在实际应用中，你需要根据自己的后端API来实现数据加载逻辑。loadNode方法中的setTimeout和固定的节点数据只是为了演示懒加载的效果，实际中你应该替换为对后端API的调用。