vue实现异步tree

Vue 实现异步 Tree 的方法

在 Vue 中实现异步 Tree 通常涉及动态加载子节点数据，以下是几种常见方法：

使用 Element UI 的 Tree 组件

Element UI 提供了支持异步加载的 Tree 组件，可以通过 lazy 属性和 load 方法实现：

<el-tree
  :props="props"
  :load="loadNode"
  lazy
  :highlight-current="true"
/>

export default {
  data() {
    return {
      props: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
      }
    }
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        // 加载根节点
        api.getRootNodes().then(data => resolve(data))
      } else {
        // 根据父节点ID加载子节点
        api.getChildren(node.data.id).then(data => {
          resolve(data)
        })
      }
    }
  }
}

自定义递归组件实现

可以创建自定义的 Tree 组件实现异步加载：

<template>
  <ul>
    <li v-for="node in nodes" :key="node.id">
      <div @click="toggle(node)">
        {{ node.name }}
        <span v-if="!node.loaded && !node.leaf">[+]</span>
      </div>
      <async-tree
        v-if="node.expanded"
        :nodes="node.children"
        @load-children="loadChildren"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'AsyncTree',
  props: ['nodes'],
  methods: {
    toggle(node) {
      if (!node.loaded && !node.leaf) {
        this.$emit('load-children', node)
      }
      node.expanded = !node.expanded
    }
  }
}
</script>

使用 Vuex 管理状态

对于复杂应用，可以使用 Vuex 管理树形数据状态：

// store.js
actions: {
  async loadTreeNodes({ commit }, parentId = null) {
    const nodes = await api.getNodes(parentId)
    commit('SET_NODES', { parentId, nodes })
  }
}

<!-- 组件中 -->
<tree-node
  v-for="node in nodes"
  :key="node.id"
  :node="node"
  @expand="loadChildren"
/>

性能优化建议

实现无限滚动或虚拟滚动处理大型树结构，避免一次性渲染过多节点。可以为节点添加加载状态指示器，提高用户体验：

<div v-if="node.loading">加载中...</div>

以上方法可以根据具体需求组合使用，Element UI 的方案适合快速实现，自定义组件方案提供更高灵活性，Vuex 方案适合状态管理复杂的应用。