vue中el-tree的懒加载

在Vue中使用el-tree（即Element UI的el-tree组件）实现懒加载，你需要设置lazy属性为true，并实现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 }]);
      }
      // 模拟异步加载数据
      setTimeout(() => {
        const data = [
          { id: node.data.id + 1, label: `${node.data.label}-1`, leaf: node.level >= 2 }
        ];
        // 调用resolve传入回调数据
        resolve(data);
      }, 1000);
    }
  }
};
</script>

在这个例子中，loadNode方法是懒加载的关键，当节点展开时会调用该方法。node参数包含了当前节点的信息，resolve函数用于将子节点数据传递给el-tree组件以显示。

注意：在实际应用中，你需要将loadNode方法中的异步获取数据的逻辑替换为实际从后端API获取数据的逻辑。