Vue-Good-Table 分组表格功能详解

Vue-Good-Table 分组表格功能详解

【免费下载链接】vue-good-table An easy to use powerful data table for vuejs with advanced customizations including sorting, column filtering, pagination, grouping etc 项目地址: https://gitcode.com/gh_mirrors/vu/vue-good-table

前言

在数据展示场景中，分组表格是一种非常实用的功能，它能够将相关数据归类展示，提升表格的可读性和组织性。Vue-Good-Table 提供了强大的分组表格功能，支持多种自定义配置。本文将全面介绍如何使用 Vue-Good-Table 实现分组表格功能。

基础分组实现

1. 启用分组功能

首先需要在表格组件中启用分组选项：

<vue-good-table
  :columns="columns"
  :rows="rows"
  :group-options="{
    enabled: true
  }"
>
</vue-good-table>

2. 数据结构要求

分组表格对数据格式有特定要求，需要使用嵌套结构：

rows: [
  {
    mode: 'span', // 跨列模式
    label: '哺乳动物', // 分组标题
    html: false, // 是否渲染为HTML
    children: [
      { name: '大象', diet: '草食', count: 5 },
      { name: '猫', diet: '肉食', count: 28 }
    ]
  }
]

关键字段说明：

• mode: 'span' 表示标题跨所有列
• label: 分组标题文本
• children: 包含该分组下的所有数据行

分组表头位置控制

默认情况下，分组表头显示在分组数据的顶部，但可以通过配置调整：

<vue-good-table
  :group-options="{
    enabled: true,
    headerPosition: 'bottom' // 可选'top'或'bottom'
  }"
>
</vue-good-table>

分组汇总行实现

有时我们需要在分组中显示汇总信息而非简单的标题：

rows: [
  {
    name: '哺乳动物总计',
    diet: undefined,
    count: '', // 汇总值将显示在这里
    children: [
      { name: '大象', diet: '草食', count: 5 },
      { name: '猫', diet: '肉食', count: 28 }
    ]
  }
]

汇总计算功能

要为汇总行添加计算功能，需要在列定义中使用 headerField 属性：

columns: [
  {
    label: '数量',
    field: 'count',
    headerField: this.sumCount, // 专门用于汇总行的计算函数
    type: 'number'
  }
],
methods: {
  sumCount: function(rowObj) {
    let sum = 0;
    for (let i = 0; i < rowObj.children.length; i++) {
      sum += rowObj.children[i].count;
    }
    return sum;
  }
}

自定义分组表头

Vue-Good-Table 提供了强大的插槽功能来自定义分组表头。

跨列模式下的自定义

当 mode 为 'span' 时：

<template slot="table-header-row" slot-scope="props">
  <span class="custom-header-class">
    {{ props.row.label }}
    <button @click="handleHeaderClick">操作按钮</button>
  </span>
</template>

非跨列模式下的自定义

<template slot="table-header-row" slot-scope="props">
  <span v-if="props.column.field == 'action'">
    <button class="action-btn">操作</button>
  </span>
  <span v-else>
    {{ props.formattedRow[props.column.field] }}
  </span>
</template>

作用域属性说明：

• props.row: 原始行数据
• props.column: 列定义对象
• props.formattedRow: 格式化后的行数据

可折叠分组功能

Vue-Good-Table 支持分组行的折叠/展开功能：

<vue-good-table
  ref="groupedTable"
  :group-options="{
    enabled: true,
    rowKey: "id", // 用于保持折叠状态的唯一标识
    collapsable: true // 或指定列索引
  }"
>
</vue-good-table>

控制所有分组状态

可以通过表格引用控制所有分组的展开/折叠：

// 展开所有分组
this.$refs.groupedTable.expandAll();

// 折叠所有分组
this.$refs.groupedTable.collapseAll();

最佳实践建议

1. 数据结构设计：确保数据格式符合分组要求，特别是嵌套的 children 结构
2. 性能优化：对于大数据量的分组，考虑实现虚拟滚动
3. 状态保持：使用 rowKey 来维持分组展开状态，特别是在动态数据场景下
4. 用户体验：为可折叠分组添加明确的视觉指示（如箭头图标）
5. 响应式设计：考虑在移动设备上的分组表格显示效果

总结

Vue-Good-Table 的分组表格功能提供了灵活而强大的数据展示方式。通过本文的介绍，您应该已经掌握了从基础分组到高级自定义的实现方法。合理使用分组功能可以显著提升数据表格的可读性和用户体验。

【免费下载链接】vue-good-table An easy to use powerful data table for vuejs with advanced customizations including sorting, column filtering, pagination, grouping etc 项目地址: https://gitcode.com/gh_mirrors/vu/vue-good-table