当前位置：首页 > VUE

vue实现异步树

2026-01-08 15:39:37VUE

Vue 实现异步树的方法

异步树通常用于展示层级数据，数据按需加载以提升性能。以下是几种实现方式：

使用 Element UI 的 Tree 组件

Element UI 提供了异步加载树的实现方式，通过 lazy 属性和 load 方法实现按需加载。

vue实现异步树

<template>
  <el-tree
    :props="props"
    :load="loadNode"
    lazy
    @node-click="handleNodeClick">
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      props: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
      }
    }
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        // 加载根节点
        return resolve([{ name: 'Root', leaf: false }])
      }
      if (node.level >= 3) {
        // 设置叶子节点
        return resolve([])
      }
      // 模拟异步加载子节点
      setTimeout(() => {
        const data = Array(5).fill(null).map((_, i) => ({
          name: `Child ${i + 1}`,
          leaf: node.level >= 2
        }))
        resolve(data)
      }, 500)
    },
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>

使用递归组件自定义实现

如果需要更灵活的控制，可以自定义递归组件实现异步树。

vue实现异步树

<template>
  <div>
    <tree-node
      v-for="node in treeData"
      :key="node.id"
      :node="node"
      @load-children="loadChildren">
    </tree-node>
  </div>
</template>

<script>
import TreeNode from './TreeNode.vue'

export default {
  components: { TreeNode },
  data() {
    return {
      treeData: [
        { id: 1, name: 'Root', children: [], loaded: false }
      ]
    }
  },
  methods: {
    loadChildren(node) {
      if (node.loaded) return

      // 模拟异步加载
      setTimeout(() => {
        node.children = Array(3).fill(null).map((_, i) => ({
          id: `${node.id}-${i + 1}`,
          name: `Child ${i + 1}`,
          children: [],
          loaded: false
        }))
        node.loaded = true
      }, 500)
    }
  }
}
</script>

使用第三方库 Vue-Tree-Select

对于更复杂的需求，可以使用专门处理树的库如 vue-treeselect。

<template>
  <treeselect
    :async="true"
    :load-options="loadOptions"
    v-model="value"
  />
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  components: { Treeselect },
  data() {
    return {
      value: null,
    }
  },
  methods: {
    loadOptions({ action, parentNode, callback }) {
      if (action === 'LOAD_CHILDREN_OPTIONS') {
        setTimeout(() => {
          parentNode.children = Array(3).fill(null).map((_, i) => ({
            id: `${parentNode.id}-${i + 1}`,
            label: `Child ${i + 1}`
          }))
          callback()
        }, 500)
      }
    }
  }
}
</script>

使用 Vuex 管理状态

对于大型应用，建议使用 Vuex 集中管理树的状态和异步加载逻辑。

// store.js
export default new Vuex.Store({
  state: {
    treeData: []
  },
  mutations: {
    SET_CHILDREN(state, { parentId, children }) {
      // 递归查找并更新节点
      function updateNodes(nodes) {
        return nodes.map(node => {
          if (node.id === parentId) {
            return { ...node, children, loaded: true }
          }
          if (node.children) {
            return { ...node, children: updateNodes(node.children) }
          }
          return node
        })
      }
      state.treeData = updateNodes(state.treeData)
    }
  },
  actions: {
    async loadChildren({ commit }, parentId) {
      const children = await api.getChildren(parentId)
      commit('SET_CHILDREN', { parentId, children })
    }
  }
})