标题、页脚与摘要行

这组能力用于在表格上下补充结构化信息。它们的分工可以简单理解为：

• title 表格上方的信息区
• footer 表格下方的补充说明
• summary 和当前数据直接相关的汇总行

在线示例

在 Playground 中编辑

<script setup lang="ts">
import { computed } from 'vue'
import { VTable, VTableSummary } from '@vtable-guild/vtable-guild'
import type { TableColumnsType } from '@vtable-guild/vtable-guild'

interface DeptRow {
  key: string
  dept: string
  headcount: number
  budget: number
  used: number
}

const columns: TableColumnsType<DeptRow> = [
  { title: '部门', dataIndex: 'dept', key: 'dept' },
  { title: '人数', dataIndex: 'headcount', key: 'headcount', align: 'right' },
  {
    title: '预算',
    dataIndex: 'budget',
    key: 'budget',
    align: 'right',
    customRender: ({ text }) => `¥ ${Number(text).toLocaleString()}`,
  },
  {
    title: '已支出',
    dataIndex: 'used',
    key: 'used',
    align: 'right',
    customRender: ({ text }) => `¥ ${Number(text).toLocaleString()}`,
  },
]

const dataSource: DeptRow[] = [
  { key: '1', dept: '平台组', headcount: 24, budget: 1200000, used: 864000 },
  { key: '2', dept: '交易组', headcount: 41, budget: 2050000, used: 1710500 },
  { key: '3', dept: '设计系统', headcount: 6, budget: 300000, used: 182000 },
  { key: '4', dept: '质量保障', headcount: 21, budget: 940000, used: 733000 },
]

const total = computed(() =>
  dataSource.reduce(
    (acc, row) => ({
      headcount: acc.headcount + row.headcount,
      budget: acc.budget + row.budget,
      used: acc.used + row.used,
    }),
    { headcount: 0, budget: 0, used: 0 },
  ),
)

const money = (value: number) => `¥ ${value.toLocaleString()}`
</script>

<template>
  <VTable
    row-key="key"
    bordered
    :columns="columns"
    :data-source="dataSource"
    :title="() => '2026 财年部门预算执行'"
    :footer="() => '口径：含外包成本，不含办公场地分摊'"
  >
    <!-- Summary 的 index 对应列下标，align 单独控制摘要单元格对齐 -->
    <template #summary>
      <VTableSummary>
        <VTableSummary.Row>
          <VTableSummary.Cell :index="0">合计</VTableSummary.Cell>
          <VTableSummary.Cell :index="1" align="right">{{ total.headcount }}</VTableSummary.Cell>
          <VTableSummary.Cell :index="2" align="right">{{
            money(total.budget)
          }}</VTableSummary.Cell>
          <VTableSummary.Cell :index="3" align="right">{{ money(total.used) }}</VTableSummary.Cell>
        </VTableSummary.Row>
      </VTableSummary>
    </template>
  </VTable>
</template>

基础示例

摘要行组件从 VTableSummary 导入，Row / Cell 挂在它上面。Cell 的 index 对应列下标。

<script setup lang="ts">
import { VTable, VTableSummary } from '@vtable-guild/vtable-guild'

const totalScore = dataSource.reduce((sum, row) => sum + row.score, 0)
</script>

<template>
  <VTable
    row-key="key"
    :columns="columns"
    :data-source="dataSource"
    :title="() => '部门绩效总览'"
    :footer="() => '数据更新时间：今天 09:30'"
  >
    <template #summary>
      <VTableSummary>
        <VTableSummary.Row>
          <VTableSummary.Cell :index="0">合计</VTableSummary.Cell>
          <VTableSummary.Cell :index="1" align="right">{{ totalScore }}</VTableSummary.Cell>
        </VTableSummary.Row>
      </VTableSummary>
    </template>
  </VTable>
</template>

什么时候用哪一个

• title 标题、统计摘要、筛选说明、批量操作提示
• footer 说明文字、更新时间、口径备注
• summary 金额合计、平均值、总数和选中项汇总

使用边界

• 只是放一段说明文字时，优先用 title 或 footer
• summary 更适合表达和当前数据直接相关的结果，而不是通用描述
• 如果页面外层已经有完整卡片头部，表格 title 可以只承载局部状态信息

相关页面

• 多级表头与单元格合并
• 自定义行与插槽