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: {
type: Array,
required: true
}
}
}
</script>使用第三方库
对于复杂树形结构，推荐使用成熟的第三方库：
- Vue Draggable Tree
- Vue Tree Select
- Element UI Tree
安装Element UI Tree示例：
npm install element-ui使用示例：
<template>
<el-tree
:data="treeData"
:props="defaultProps"
@node-click="handleNodeClick">
</el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [{
label: '一级节点',
children: [{
label: '二级节点'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
handleNodeClick(data) {
console.log(data)
}
}
}
</script>动态加载数据
对于大数据量的树形结构，可采用懒加载方式：
<template>
<el-tree
:props="props"
:load="loadNode"
lazy>
</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: '根节点' }])
}
if (node.level > 3) return resolve([])
setTimeout(() => {
const data = Array(5).fill(null).map((_, i) => ({
name: `节点${node.level}-${i}`,
leaf: node.level >= 2
}))
resolve(data)
}, 500)
}
}
}
</script>自定义树节点样式
可以通过scoped slot自定义树节点显示内容：
<template>
<el-tree
:data="data"
:props="defaultProps"
show-checkbox
node-key="id">
<span slot-scope="{ node, data }" class="custom-tree-node">
<span>{{ node.label }}</span>
<span>
<el-button
type="text"
size="mini"
@click="append(data)">
添加
</el-button>
</span>
</span>
</el-tree>
</template>树形表格实现
结合el-table实现树形表格：
<template>
<el-table
:data="tableData"
row-key="id"
border
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="名称" width="180"></el-table-column>
</el-table>
</template>以上方法可根据具体需求选择使用，递归组件适合简单场景，第三方库提供更多功能，动态加载优化性能，自定义样式增强灵活性。
