vue实现分组表格
实现分组表格的基本思路
在Vue中实现分组表格通常需要将数据按特定字段分组，并通过嵌套循环渲染表格结构。核心步骤包括数据处理和模板渲染两部分。
数据分组处理
使用reduce方法对原始数据进行分组，生成按分组字段分类的结构化数据。例如按category字段分组：
computed: {
groupedData() {
return this.rawData.reduce((acc, item) => {
const key = item.category;
if (!acc[key]) acc[key] = [];
acc[key].push(item);
return acc;
}, {});
}
}模板渲染结构
采用嵌套的v-for循环，外层循环渲染分组标题，内层循环渲染分组内的数据行：
<table>
<template v-for="(group, groupName) in groupedData">
<tr class="group-header">
<th colspan="3">{{ groupName }}</th>
</tr>
<tr v-for="item in group" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.value }}</td>
</tr>
</template>
</table>样式优化技巧
为分组标题添加视觉区分效果：
.group-header {
background-color: #f5f5f5;
font-weight: bold;
}
.group-header th {
padding: 8px 12px;
text-align: left;
}动态分组实现
通过计算属性实现动态分组字段切换：
props: ['groupBy'],
computed: {
groupedData() {
const groupKey = this.groupBy || 'defaultCategory';
return this.rawData.reduce((acc, item) => {
const key = item[groupKey];
if (!acc[key]) acc[key] = [];
acc[key].push(item);
return acc;
}, {});
}
}复杂分组场景处理
对于多级分组需求，可采用递归组件或更复杂的数据结构：
// 多级分组数据处理
function multiLevelGroup(data, levels) {
if (levels.length === 0) return data;
const currentLevel = levels[0];
return data.reduce((acc, item) => {
const key = item[currentLevel];
if (!acc[key]) acc[key] = [];
acc[key].push(item);
return acc;
}, {});
}性能优化建议
当处理大数据量时：
- 使用虚拟滚动技术
- 考虑分页加载分组数据
- 对计算属性进行缓存优化
// 带缓存的分组计算
import { computed } from 'vue';
const groupedData = computed(() => {
// 分组逻辑
}, { cache: true });第三方组件集成
现有UI库如Element UI、Ant Design Vue等提供现成的分组表格组件：
<!-- Element UI示例 -->
<el-table :data="tableData" row-key="id" default-expand-all>
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
</el-table>交互功能扩展
添加折叠展开功能提升用户体验：
data() {
return {
expandedGroups: {}
}
},
methods: {
toggleGroup(groupName) {
this.$set(this.expandedGroups, groupName, !this.expandedGroups[groupName]);
}
}对应模板中添加控制逻辑：
<tr @click="toggleGroup(groupName)">
<td colspan="2">{{ groupName }}</td>
</tr>
<template v-if="expandedGroups[groupName]">
<!-- 分组内容 -->
</template>
