vue如何实现树形表格
Vue 实现树形表格的方法
使用递归组件
递归组件是处理树形结构的常用方法。通过组件自身调用自身，可以动态渲染无限层级的树形结构。
<template>
<table>
<tr v-for="node in treeData" :key="node.id">
<td>{{ node.name }}</td>
<td v-if="node.children">
<tree-table :treeData="node.children"></tree-table>
</td>
</tr>
</table>
</template>
<script>
export default {
name: 'TreeTable',
props: {
treeData: Array
}
}
</script>使用第三方库
Element UI、Ant Design Vue 等主流 UI 库提供了现成的树形表格组件。
<template>
<el-table
:data="tableData"
row-key="id"
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
</el-table>
</template>手动实现展开/折叠功能
通过维护一个展开状态数组，控制子节点的显示隐藏。
<template>
<table>
<tr v-for="node in flatData" :key="node.id">
<td @click="toggleExpand(node.id)">
{{ node.name }}
</td>
<td v-if="!isExpanded(node.id) && node.children" style="display:none">
<!-- 子节点内容 -->
</td>
</tr>
</table>
</template>
<script>
export default {
data() {
return {
expandedKeys: []
}
},
methods: {
toggleExpand(id) {
const index = this.expandedKeys.indexOf(id)
if (index > -1) {
this.expandedKeys.splice(index, 1)
} else {
this.expandedKeys.push(id)
}
},
isExpanded(id) {
return this.expandedKeys.includes(id)
}
}
}
</script>性能优化技巧
对于大型树形数据，建议使用虚拟滚动技术。第三方库如 vue-virtual-scroller 可以显著提升渲染性能。
<template>
<RecycleScroller
:items="flattenTree"
:item-size="50"
key-field="id">
<template v-slot="{ item }">
<div :style="{ paddingLeft: `${item.level * 20}px` }">
{{ item.name }}
</div>
</template>
</RecycleScroller>
</template>数据转换
如果原始数据不是树形结构，可以使用算法将其转换为树形结构。
function buildTree(flatData, parentId = null) {
return flatData
.filter(item => item.parentId === parentId)
.map(item => ({
...item,
children: buildTree(flatData, item.id)
}))
}
