Element-UI 中树形数据与懒加载

Element-UI 中的 Tree 组件支持懒加载，也就是说只有当节点被展开时才会去加载该节点下的子节点数据。这在处理大量数据时能够提高性能和用户体验。

要使用懒加载，需要为 Tree 组件设置 load 方法，该方法会在节点展开时被调用。load 方法接收一个参数 node，表示当前被展开的节点。在 load 方法中，我们可以通过异步请求获取该节点下的子节点数据，并使用 resolve 方法将数据返回给 Tree 组件。

示例代码如下：

<template>
  <el-tree :data="data" :load="loadData"></el-tree>
</template>

<script>
  export default {
    data() {
      return {
        data: [
          {
            label: '一级节点',
            children: true // 表示该节点有子节点，但未加载
          }
        ]
      }
    },
    methods: {
      loadData(node, resolve) {
        // 异步请求获取子节点数据
        setTimeout(() => {
          const children = [
            {
              label: '二级节点1'
            },
            {
              label: '二级节点2'
            }
          ]
          // 将子节点数据返回给 Tree 组件
          resolve(children)
        }, 1000)
      }
    }
  }
</script>

在上述示例中，我们通过设置 children 属性为 true 来表示该节点有子节点，但未加载。当该节点被展开时，会调用 loadData 方法，该方法会通过异步请求获取子节点数据，并使用 resolve 方法将数据返回给 Tree 组件。返回的数据会自动渲染为该节点的子节点。

需要注意的是，load 方法需要返回一个 Promise 或在回调函数中调用 resolve 方法。如果返回的是 Promise，则需要在 Promise 中 resolve 子节点数据，例如：

loadData(node) {
  return new Promise(resolve => {
    // 异步请求获取子节点数据
    setTimeout(() => {
      const children = [
        {
          label: '二级节点1'
        },
        {
          label: '二级节点2'
        }
      ]
      // 将子节点数据返回给 Tree 组件
      resolve(children)
    }, 1000)
  })
}