vue 实现树组件
Vue 树形组件实现
基础树形结构实现
使用递归组件实现树形结构，核心是通过组件自身调用自身渲染嵌套数据。
<template>
<ul>
<li v-for="node in treeData" :key="node.id">
{{ node.label }}
<tree-node v-if="node.children" :treeData="node.children"></tree-node>
</li>
</ul>
</template>
<script>
export default {
name: 'TreeNode',
props: {
treeData: Array
}
}
</script>动态展开/折叠功能
通过添加展开状态控制子节点显示，结合CSS过渡效果提升用户体验。
<template>
<ul>
<li v-for="node in treeData" :key="node.id">
<span @click="toggleExpand(node)">
{{ node.expanded ? '▼' : '►' }} {{ node.label }}
</span>
<tree-node
v-if="node.children && node.expanded"
:treeData="node.children">
</tree-node>
</li>
</ul>
</template>
<script>
export default {
methods: {
toggleExpand(node) {
this.$set(node, 'expanded', !node.expanded)
}
}
}
</script>复选框选择功能
实现单选、多选和级联选择功能，需要处理父子节点间的选中状态联动。
<template>
<ul>
<li v-for="node in treeData" :key="node.id">
<input
type="checkbox"
v-model="node.checked"
@change="handleCheckChange(node)">
{{ node.label }}
<tree-node
v-if="node.children && node.expanded"
:treeData="node.children"
@check-change="propagateCheckChange">
</tree-node>
</li>
</ul>
</template>
<script>
export default {
methods: {
handleCheckChange(node) {
this.$emit('check-change', node)
},
propagateCheckChange(node) {
this.$emit('check-change', node)
}
}
}
</script>异步加载子节点
当数据量较大时，实现按需加载子节点功能。
methods: {
loadChildren(node) {
if (!node.childrenLoaded) {
api.getChildren(node.id).then(children => {
this.$set(node, 'children', children)
this.$set(node, 'childrenLoaded', true)
})
}
this.toggleExpand(node)
}
}拖拽排序功能
通过HTML5拖拽API实现节点拖拽排序。
handleDragStart(e, node) {
e.dataTransfer.setData('text/plain', node.id)
},
handleDrop(e, parentNode) {
const nodeId = e.dataTransfer.getData('text/plain')
// 实现节点移动逻辑
}性能优化建议
对于大型树结构，采用虚拟滚动技术优化渲染性能。
// 使用vue-virtual-scroll-list等第三方库
import VirtualList from 'vue-virtual-scroll-list'
export default {
components: {
VirtualList
}
}样式定制技巧
通过CSS变量和插槽实现主题定制。
.tree-node {
--indent: 20px;
--icon-color: #666;
}
.tree-node li {
padding-left: var(--indent);
}完整实现可参考Element UI的Tree组件或Ant Design Vue的Tree组件设计，这些成熟组件库提供了丰富的API和功能示例。实际开发中可根据项目需求选择合适的技术方案，平衡功能完整性和性能要求。
