vue2 vant 懒加载树形数据

Vue 2 中，Vant 是一套基于 Vue 的移动端 UI 组件库，而 lazy loading 主要是为了优化性能，避免一次性加载所有数据导致页面初始化慢的问题，特别是在处理大量树状结构数据时。

在 Vant 的 Tree 组件中实现懒加载，你可以这样做：

1. 使用 `v-model` 和 `load` 属性：Vant 的 Tree 组件有一个 `load` 函数，当需要加载节点的数据时会被触发。你可以在这个函数内部发送请求，获取数据后更新节点的 children 或者设置一个 `loading` 状态，表示数据正在加载。

<van-tree :data="treeData" v-model="selectedNode" @load="loadChildren">
</van-tree>

data() {
  return {
    treeData: [], // 初始化空的数据数组
    selectedNode: null,
    loadChildren(node) { // 当点击某个节点时触发 load 函数
      if (node && node.children) { // 如果有children属性未加载
        this.$axios.get('/api/tree-data', { params: { id: node.id } }).then(response => {
          node.children = response.data; // 更新节点的children
          node.loading = false; // 设置节点为已加载
        });
      }
    },
  };
},

2. 初始加载部分数据：可以只加载当前层级的节点，当用户滚动到下一层时动态加载更多数据。

3. 使用递归遍历：如果数据结构复杂，可能需要递归地处理每一层的懒加载。