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

el-tree 可以通过在节点上绑定 `load` 方法来实现动态加载数据。具体来说，当某个节点被点击时，如果该节点没有加载过子节点，那么就会触发 `load` 方法，该方法可以通过异步请求获取该节点的子节点数据，并将数据传递给 `resolve` 回调函数。

下面是一个简单的示例：

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

<script>
export default {
  data() {
    return {
      treeData: []
    }
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        // 加载一级节点
        axios.get('/api/first-level-nodes').then(res => {
          resolve(res.data)
        })
      } else if (node.level === 1) {
        // 加载二级节点
        axios.get(`/api/second-level-nodes/${node.id}`).then(res => {
          resolve(res.data)
        })
      } else {
        // 加载三级节点
        axios.get(`/api/third-level-nodes/${node.id}`).then(res => {
          resolve(res.data)
        })
      }
    }
  }
}
</script>

上述代码中，我们在 `el-tree` 上绑定了 `load` 方法，并且开启了懒加载模式（即 `lazy` 属性为 `true`）。在 `load` 方法中，我们根据节点的 `level` 属性来判断当前节点是一级节点、二级节点还是三级节点，并根据节点的 `id` 属性来异步请求相应的子节点数据。请求成功后，我们将数据传递给 `resolve` 回调函数，让 `el-tree` 组件自动渲染子节点。