vue实现异步树
Vue 异步树实现方法
异步树通常用于处理大量层级数据，通过动态加载子节点减少初始渲染压力。以下是几种常见实现方式：
使用 Element UI 的 Tree 组件
Element UI 提供现成的异步树实现方案：
<el-tree
:props="props"
:load="loadNode"
lazy
@node-click="handleNodeClick">
</el-tree>
props: {
label: 'name',
children: 'zones',
isLeaf: 'leaf'
},
loadNode(node, resolve) {
if (node.level === 0) {
return resolve([{ name: '根节点' }]);
}
if (node.level > 3) return resolve([]);
setTimeout(() => {
const data = Array(5).fill(null).map((_, i) => ({
name: `节点${node.data.name}-${i}`,
leaf: node.level >= 2
}));
resolve(data);
}, 500);
}自定义递归组件实现
创建可复用的异步树组件：
<template>
<ul>
<li v-for="node in nodes" :key="node.id">
<span @click="toggle(node)">
{{ node.name }}
<span v-if="!node.loaded && !node.isLeaf">▶</span>
</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', 'loadChildren'],
methods: {
async toggle(node) {
if (!node.loaded && !node.isLeaf) {
node.children = await this.loadChildren(node);
node.loaded = true;
}
node.expanded = !node.expanded;
}
}
}
</script>使用 Vuex 管理状态
对于复杂场景可结合状态管理：
// store.js
const store = new Vuex.Store({
state: {
treeData: {}
},
mutations: {
SET_CHILDREN(state, { parentId, children }) {
Vue.set(state.treeData, parentId, children);
}
},
actions: {
async fetchChildren({ commit }, parentId) {
const res = await api.getChildren(parentId);
commit('SET_CHILDREN', { parentId, children: res.data });
}
}
});
// 组件中使用
computed: {
nodes() {
return this.$store.state.treeData[this.parentId] || [];
}
},
methods: {
loadChildren(parentId) {
this.$store.dispatch('fetchChildren', parentId);
}
}性能优化技巧
- 使用虚拟滚动处理超大数据量
- 实现节点缓存避免重复请求
- 添加防抖处理频繁展开操作
- 提供加载状态反馈：
<span v-if="node.loading">加载中...</span>
以上方案可根据具体需求组合使用，Element UI方案适合快速实现，自定义组件灵活性更高，Vuex方案适合复杂状态管理场景。
