vue实现多级表格
Vue 实现多级表格的方法
递归组件实现嵌套结构
使用 Vue 的递归组件特性可以自然处理多级表格的嵌套关系。定义一个包含自引用的组件模板，通过数据驱动渲染层级。
<template>
<table>
<tr v-for="item in data" :key="item.id">
<td>{{ item.name }}</td>
<td v-if="item.children">
<nested-table :data="item.children"/>
</td>
</tr>
</table>
</template>
<script>
export default {
name: 'NestedTable',
props: ['data']
}
</script>动态展开/折叠控制
通过添加展开状态标识实现交互功能，结合 v-show 或 transition 实现平滑的展开动画效果。
<template>
<tr v-for="item in data" :key="item.id">
<td @click="toggleExpand(item)">
{{ item.expanded ? '-' : '+' }} {{ item.name }}
</td>
<td v-show="item.expanded">
<nested-table :data="item.children"/>
</td>
</tr>
</template>
<script>
export default {
methods: {
toggleExpand(item) {
this.$set(item, 'expanded', !item.expanded)
}
}
}
</script>表头层级处理
对于需要显示多级表头的情况，可以采用二维数组结构描述表头关系，通过 colspan 和 rowspan 实现合并单元格。
<template>
<thead>
<tr v-for="(row, i) in headerRows" :key="i">
<th
v-for="col in row"
:key="col.id"
:colspan="col.span"
:rowspan="col.rowspan">
{{ col.title }}
</th>
</tr>
</thead>
</template>
<script>
export default {
computed: {
headerRows() {
// 处理表头层级关系算法
return processedHeaders
}
}
}
</script>性能优化建议
大数据量情况下建议使用虚拟滚动技术，只渲染可视区域内的行。可以配合 vue-virtual-scroller 等库实现。
import { RecycleScroller } from 'vue-virtual-scroller'
export default {
components: { RecycleScroller },
template: `
<RecycleScroller
:items="flattenData"
:item-size="50"
key-field="id">
<template v-slot="{ item }">
<!-- 渲染单行内容 -->
</template>
</RecycleScroller>
`,
computed: {
flattenData() {
// 将嵌套数据展平为单层数组
}
}
}第三方组件库方案
现有 UI 库如 Element UI 的 Table 组件支持多级表头配置，Ant Design Vue 的 Table 提供树形数据展示功能，可快速实现需求。
// Element UI 多级表头示例
columns: [
{
label: '一级',
children: [
{
label: '二级',
prop: 'field'
}
]
}
]
// Ant Design Vue 树形表格
<a-table :columns="columns" :data-source="treeData" :expandable="expandConfig"/>
