基本表格分组展示

在本教程中，我们将学习如何使用 VTable 中的基本表格分组展示功能。

使用场景

基本表格分组展示功能适用于多种场景，例如：

• 财务报表：可以按照不同的账户类型（如收入、支出、资产、负债）进行分组展示，帮助更清晰地了解财务状况。
• 销售数据分析：可以按照产品类别、地区、销售人员等进行分组，方便比较和分析不同类别或区域的销售表现。
• 项目管理：可以按照项目阶段、负责团队、优先级等进行分组，帮助更好地跟踪和管理项目进度。
• 人力资源管理：可以按照部门、职位、工作年限等进行分组，方便进行员工管理和绩效评估。

使用方式

ListTable的option中，配置groupBy字段，值为分组字段名称，可以配置一个字段，也可以配置多个字段组成的数组。

{
  // ...
  groupConfig: {
    groupBy: 'key',
  }
}

或

{
  // ...
  groupConfig: {
    groupBy: ['key1', 'key2'],
  }
}

示例

自定义分组标题文本格式

在option中，可以配置groupTitleFieldFormat属性，用于自定义分组标题的文本格式。该属性是一个函数，接收分组字段名称和分组值作为参数，返回要显示的文本内容。

const option: VTable.ListTableConstructorOptions = {
  // ...
  groupConfig: {
    groupBy: 'group',
    titleFieldFormat: (record, col, row, table) => {
      return record.vtableMergeName + '(' + record.children.length + ')';
    }
  }
};

示例：

指定分组标题显示样式

在theme中，可以配置groupTitleStyle属性，用于指定分组标题的显示样式。其中，如果需要指定不同层级的分组标题的样式，可以使用函数，通过table.getGroupTitleLevel(col, row)方法获取当前节点的层级，去指定不同层级的样式。

const option: VTable.ListTableConstructorOptions = {
  // ...
  groupConfig: {
    groupBy: ['Category', 'Sub-Category'],
  },
  theme: VTable.themes.DEFAULT.extends({
    groupTitleStyle: {
      fontWeight: 'bold',
      bgColor: args => {
        const { col, row, table } = args;
        const index = table.getGroupTitleLevel(col, row); // 获取当前节点的层级
        if (index !== undefined) {
          return titleColorPool[index % titleColorPool.length];
        }
      }
    }
  })
};

分组标题吸附功能

在option中，可以配置enableTreeStickCell属性，用于开启分组标题吸附功能。开启后，当表格滚动时，分组标题会自动吸附到表格的顶部。

const option: VTable.ListTableConstructorOptions = {
  // ...
  groupConfig: {
    groupBy: ['Category', 'Sub-Category'],
    enableTreeStickCell: true
  }
};

分组标题自定义

在option中，可以配置groupTitleCustomLayout属性，用于在分组标题中进行自定义布局。

分组复选框

可以在rowSeriesNumber中配置cellType: 'checkbox'属性，用于在分组情况下显示复选框。开启后，分组标题的左侧会出现复选框，会和子元素的选中状态同步。

如果想在分组标题也显示checkbox，可以配置groupConfig.titleCheckbox属性，用于开启或者关闭分组标题的checkbox功能。默认是false。

如不想关联父子节点的选中状态，可以配置enableCheckboxCascade属性，用于开启或者关闭分组复选框级联功能。同样适用于column中配置的checkbox的情况。

如果不想关联表头和body单元格的选中状态，可以配置enableHeaderCheckboxCascade属性为false，用于开启或者关闭表头复选框级联功能。

enableCheckboxCascade为true时则enableHeaderCheckboxCascade必定为true。