vue实现异步tree
Vue 异步 Tree 实现方法
使用 el-tree 组件（Element UI）
安装 Element UI 后，可以通过 el-tree 组件实现异步加载：
<template>
<el-tree
:props="props"
:load="loadNode"
lazy
@node-click="handleNodeClick">
</el-tree>
</template>
<script>
export default {
data() {
return {
props: {
label: 'name',
children: 'zones',
isLeaf: 'leaf'
}
}
},
methods: {
loadNode(node, resolve) {
if (node.level === 0) {
// 加载根节点
return resolve([{ name: 'Root' }])
}
if (node.level > 3) return resolve([])
// 模拟异步加载
setTimeout(() => {
const nodes = Array.from({ length: 3 }).map((_, i) => ({
name: `Child ${i + 1}`,
leaf: node.level >= 2
}))
resolve(nodes)
}, 500)
},
handleNodeClick(data) {
console.log(data)
}
}
}
</script>自定义递归组件实现
创建可复用的异步树组件：
<template>
<ul>
<li v-for="node in nodes" :key="node.id">
<span @click="toggle(node)">
{{ node.name }}
</span>
<async-tree
v-if="node.expanded && node.children"
:nodes="node.children"
:load-children="loadChildren"/>
</li>
</ul>
</template>
<script>
export default {
name: 'AsyncTree',
props: {
nodes: Array,
loadChildren: Function
},
methods: {
async toggle(node) {
if (!node.children && this.loadChildren) {
node.children = await this.loadChildren(node)
}
this.$set(node, 'expanded', !node.expanded)
}
}
}
</script>使用 Vuex 管理状态
对于大型应用，建议使用 Vuex 管理树状态：
// store.js
export default new Vuex.Store({
state: {
treeData: {}
},
mutations: {
SET_NODE_CHILDREN(state, { nodeId, children }) {
Vue.set(state.treeData, nodeId, children)
}
},
actions: {
async fetchChildren({ commit }, nodeId) {
const children = await api.getChildren(nodeId)
commit('SET_NODE_CHILDREN', { nodeId, children })
}
}
})性能优化技巧
添加防抖处理高频展开操作：
methods: {
toggle: _.debounce(function(node) {
if (!node.children && this.loadChildren) {
this.loadChildren(node).then(children => {
this.$set(node, 'children', children)
this.$set(node, 'expanded', true)
})
} else {
this.$set(node, 'expanded', !node.expanded)
}
}, 300)
}实现虚拟滚动应对大数据量：
<virtual-list
:size="40"
:remain="8"
:data="nodes">
<async-tree-node
v-for="node in nodes"
:node="node"
@expand="handleExpand"/>
</virtual-list>注意事项
- 确保每个节点有唯一标识符
- 处理加载状态和错误情况
- 考虑添加节点缓存机制
- 对于移动端注意触摸事件支持
以上方法可根据实际需求组合使用，Element UI 方案适合快速开发，自定义组件方案提供更大灵活性。
