Skip to content

TableSummary 表格汇总

表格汇总行,在 <c-table> 底部渲染 <tfoot> 汇总区(不通过 Table.Summary 静态属性挂载,平铺独立顶层组件)。

使用前提

TableSummary 必须作为 <c-table> 的子组件使用。default slot 内放 <tr> / <td> 原生标签(也可放多个 <tr> 行),由 Table 直接挂到 tfoot。

同一 Table 建议只声明一个 TableSummary,并在其中放置多行。若同时声明多个,按当前模板顺序渲染第一个非空实例;该实例卸载后自动回退到下一个。

何时使用

  • 表格底部需要展示「合计」「平均值」「总数」等汇总信息。
  • 报表 / 财务 / 数据看板的总计行。

基本使用

多行汇总

可在 default slot 内放多个 <tr> 渲染多行汇总。

TableSummary 参数

fixed="top" 时仍使用原生 <tfoot>:DOM 顺序为 <thead><tfoot><tbody>,保证列标题在汇总单元格之前。初始状态汇总紧随表头;滚动使表头离开后,汇总区再固定到容器顶部。fixed="bottom" 与非固定状态仍把 <tfoot> 放在 <tbody> 之后。

参数类型默认说明
fixedboolean | 'top' | 'bottom'false滚动场景汇总行是否粘性;true 等同于 'bottom',配合 Table scroll.y 使用

TableSummary 插槽

插槽名说明
default汇总行内容,需要包一层或多层 <tr> / <td> 原生节点

Released under the MIT License.