Vue 自动合计行

开启 showSummary，为列配置 summary: 'sum'|'avg'|'count'|'max'|'min' 或 summaryMethod 自定义聚合。合计基于筛选/排序后的数据动态计算，占用表尾。

使用的 API

type Column = {
  key: string;  // 列标识(必填)
  title: string;  // 列标题(必填)
  width: number;  // 列宽(必填)
  summary?: 'sum' | 'avg' | 'count' | 'max' | 'min';  // 内置聚合
  summaryMethod?: (values: unknown[]) => string;  // 自定义聚合
}

type Options = {
  list: T[];  // 数据列表
  itemKey: string;  // 行唯一标识字段名
  estimatedSize: number;  // 行预估高度(px)
  showSummary: boolean;  // 显示合计行
  summaryText: string;  // 合计行首列文案
}

示例

微应用尚未挂载。

源码

点击查看源码

<template>
  <div class="demo-wrapper">
    <h3 class="demo-title">Vue 自动合计行</h3>
    <div class="demo-hint">
      底部合计行自动聚合：数量求和、单价求平均、小计自定义汇总。合计随筛选/排序动态更新。
    </div>
    <div style="width: 720px; height: 480px" class="demo-container">
      <VirtTableVue :columns="columns" :options="options" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { VirtTableVue, type VueTableColumn } from '@virt-table/vue';
import { faker } from '@faker-js/faker';

interface Row extends Record<string, unknown> {
  id: number;
  name: string;
  qty: number;
  price: number;
  total: number;
}

const columns: VueTableColumn<Row>[] = [
  { key: 'id', title: 'ID', width: 80 },
  { key: 'name', title: '商品', width: 200 },
  { key: 'qty', title: '数量', width: 140, align: 'right', summary: 'sum' },
  { key: 'price', title: '单价', width: 140, align: 'right', summary: 'avg' },
  {
    key: 'total',
    title: '小计',
    width: 160,
    align: 'right',
    summaryMethod: (values) =>
      '¥' + (values as number[]).reduce((a, b) => a + (b || 0), 0).toFixed(2),
  },
];

const list: Row[] = Array.from({ length: 800 }, (_, i) => {
  const qty = faker.number.int({ min: 1, max: 20 });
  const price = faker.number.int({ min: 5, max: 500 });
  return { id: i + 1, name: faker.commerce.productName(), qty, price, total: qty * price };
});

const options = {
  list,
  itemKey: 'id',
  estimatedSize: 40,
  buffer: 6,
  border: true,
  showSummary: true,
  summaryText: '合计',
};
</script>