el-tree懒加载代码

El-tree 是一种基于 Vue.js 的树形组件，可以用来显示大量的层级数据。懒加载是 El-tree 的一个性能优化特性，它可以在需要时加载数据，而不是一次性加载所有数据。下面是一个简单的 El-tree 懒加载代码示例：

<template>
  <el-tree :data="data" :props="defaultProps" node-key="id" :load="loadNode" @node-click="handleNodeClick">
    <template slot-scope="{ node, data }">
      <span class="custom-tree-node">{{ node.label }}</span>
    </template>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleNodeClick(node, data) {
      console.log(node, data);
    },
    loadNode(node, resolve) {
      if (node.level >= 2) return resolve([]);
      setTimeout(() => {
        const data = [
          { label: 'Child Node 1', children: [] },
          { label: 'Child Node 2', children: [] }
        ];
        resolve(data);
      }, 500);
    }
  }
};
</script>

在这个代码中，我们定义了一个 El-tree 组件，并通过 `load` 属性指定了一个 `loadNode` 方法。当用户展开一个节点时，El-tree 就会调用 `loadNode` 方法，加载该节点的子节点数据。此外，在代码中还使用了模板语法来定制节点的显示样式。