vue实现异步树

Vue 实现异步树的方法

在 Vue 中实现异步树通常需要结合组件递归和异步数据加载。以下是几种常见的实现方式：

使用递归组件 + 动态加载

创建一个递归组件，通过 v-if 控制子节点的加载状态，并在展开节点时触发异步数据加载：

<template>
  <div>
    <tree-node :node="rootNode" @expand="onExpand"></tree-node>
  </div>
</template>

<script>
export default {
  components: {
    TreeNode: {
      props: ['node'],
      template: `
        <div>
          <div @click="toggle">
            {{ node.label }}
            <span v-if="node.loading">Loading...</span>
          </div>
          <div v-if="node.expanded && node.children">
            <tree-node 
              v-for="child in node.children" 
              :key="child.id" 
              :node="child"
              @expand="$emit('expand', $event)"
            ></tree-node>
          </div>
        </div>
      `,
      methods: {
        toggle() {
          this.$emit('expand', this.node)
        }
      }
    }
  },
  data() {
    return {
      rootNode: {
        id: 'root',
        label: 'Root',
        children: null,
        expanded: false,
        loading: false
      }
    }
  },
  methods: {
    async onExpand(node) {
      if (node.children === null && !node.loading) {
        node.loading = true
        node.children = await this.fetchChildren(node.id)
        node.loading = false
      }
      node.expanded = !node.expanded
    },
    fetchChildren(parentId) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve([
            { id: `${parentId}-1`, label: `Child 1 of ${parentId}`, children: null },
            { id: `${parentId}-2`, label: `Child 2 of ${parentId}`, children: null }
          ])
        }, 500)
      })
    }
  }
}
</script>

使用第三方库

Element UI 的 el-tree 组件提供了异步加载功能：

<template>
  <el-tree
    :props="props"
    :load="loadNode"
    lazy
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      props: {
        label: 'label',
        children: 'children',
        isLeaf: 'leaf'
      }
    }
  },
  methods: {
    async loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ label: 'Root', children: [] }])
      }
      const children = await this.fetchChildren(node.key || 'root')
      resolve(children)
    },
    fetchChildren(parentId) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve([
            { label: `Child 1 of ${parentId}`, children: [] },
            { label: `Child 2 of ${parentId}`, leaf: true }
          ])
        }, 500)
      })
    }
  }
}
</script>

使用 Vuex 管理状态

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

// store.js
export default new Vuex.Store({
  state: {
    treeData: {
      'root': {
        id: 'root',
        label: 'Root',
        children: [],
        loaded: false
      }
    }
  },
  mutations: {
    SET_CHILDREN(state, { parentId, children }) {
      state.treeData[parentId].children = children
      state.treeData[parentId].loaded = true
      children.forEach(child => {
        Vue.set(state.treeData, child.id, { ...child, loaded: false })
      })
    }
  },
  actions: {
    async loadChildren({ commit }, parentId) {
      const children = await fetchChildren(parentId)
      commit('SET_CHILDREN', { parentId, children })
    }
  }
})

<template>
  <tree-node :node-id="'root'"></tree-node>
</template>

<script>
export default {
  components: {
    TreeNode: {
      props: ['nodeId'],
      computed: {
        node() {
          return this.$store.state.treeData[this.nodeId]
        }
      },
      methods: {
        toggle() {
          if (!this.node.loaded) {
            this.$store.dispatch('loadChildren', this.nodeId)
          }
        }
      },
      template: `
        <div>
          <div @click="toggle">{{ node.label }}</div>
          <div v-if="node.children.length">
            <tree-node 
              v-for="childId in node.children" 
              :key="childId" 
              :node-id="childId"
            ></tree-node>
          </div>
        </div>
      `
    }
  }
}
</script>

关键点总结

• 递归组件是实现树形结构的基础，组件需要能够调用自身
• 异步加载通常在节点展开时触发，需要管理加载状态
• 数据管理可以选择组件内部状态或全局状态管理如 Vuex
• 性能优化考虑虚拟滚动、懒加载等技术处理大型树结构

以上方法可以根据具体需求选择或组合使用，Element UI 等组件库提供了开箱即用的解决方案，适合快速开发。