el-tree如何动态加载数据,vue代码如何写

el-tree可以通过使用 `lazy` 属性来实现动态加载数据。当 `lazy` 属性被设置为 `true` 时，`el-tree` 会在展开一个节点时触发 `load` 事件，你可以在该事件中异步获取该节点的子节点数据。

以下是一个使用 `lazy` 属性动态加载数据的 `el-tree` 的 Vue 代码示例：

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

<script>
export default {
  data() {
    return {
      treeData: [
        {
          label: '节点1',
          id: 1,
          children: [],
          hasChildren: true
        }
      ]
    };
  },
  methods: {
    loadData(node, resolve) {
      // 通过异步请求获取子节点数据
      const childNodes = [{ label: '子节点1', id: 2 }];

      // 将子节点数据添加到父节点上
      node.children = childNodes;

      // 标记父节点已经加载过子节点数据
      node.hasChildren = true;

      // 通知 el-tree 数据已经加载完成
      resolve();
    }
  }
};
</script>

在上面的代码示例中，当 `el-tree` 展开节点1时，会触发 `loadData` 方法。在该方法中，我们可以通过异步请求获取子节点数据，并将子节点数据添加到父节点上。注意，我们需要手动标记父节点已经加载过子节点数据，以便 `el-tree` 正确地渲染节点展开/折叠图标。最后，我们需要调用 `resolve()` 方法通知 `el-tree` 数据已经加载完成。