vue 树形控件实现
Vue 树形控件实现方法
使用第三方组件库（推荐）
Element UI、Ant Design Vue 等主流 UI 库均提供成熟的树形控件：
Element UI Tree
<template>
<el-tree
:data="treeData"
show-checkbox
node-key="id"
@node-click="handleNodeClick"
/>
</template>
<script>
export default {
data() {
return {
treeData: [{
id: 1,
label: '一级节点',
children: [{
id: 2,
label: '二级节点'
}]
}]
}
},
methods: {
handleNodeClick(data) {
console.log(data)
}
}
}
</script>Ant Design Vue Tree
<template>
<a-tree
:tree-data="treeData"
show-icon
@select="onSelect"
/>
</template>手动实现递归组件
通过递归组件实现基础树形结构：
<template>
<ul>
<li v-for="node in treeData" :key="node.id">
{{ node.label }}
<tree-node v-if="node.children" :treeData="node.children"/>
</li>
</ul>
</template>
<script>
export default {
name: 'TreeNode',
props: ['treeData']
}
</script>动态加载数据
实现异步加载子节点数据：
<template>
<el-tree
:load="loadNode"
lazy
/>
</template>
<script>
export default {
methods: {
loadNode(node, resolve) {
if (node.level === 0) {
return resolve([{ name: '根节点' }])
}
axios.get('/api/nodes', { params: { parentId: node.key } })
.then(res => resolve(res.data))
}
}
}
</script>自定义节点内容
通过插槽自定义节点渲染：
<el-tree :data="data">
<template #default="{ node, data }">
<span class="custom-node">
<i :class="data.icon"></i>
{{ node.label }}
</span>
</template>
</el-tree>关键功能实现
展开/折叠控制
methods: {
toggleExpand(node) {
this.$refs.tree.toggleExpansion(node)
}
}复选框选择
watch: {
checkedKeys(newVal) {
this.$refs.tree.setCheckedKeys(newVal)
}
}拖拽排序
<el-tree
draggable
@node-drop="handleDrop"
/>性能优化建议
大数据量时使用虚拟滚动：
<el-tree-v2
:data="largeData"
:height="500"
:props="{ label: 'name', children: 'children' }"
/>树形数据扁平化处理可提升渲染效率：
function flattenTree(nodes) {
return nodes.reduce((acc, node) => {
acc.push(node)
if (node.children) {
acc.push(...flattenTree(node.children))
}
return acc
}, [])
}
