Table 表格

展示行列数据，支持固定表头、固定列、条纹、边框等。

基础用法

Name	Country	Position	Office
Ephraim Wisozk	Reunion	Marketing Designer	Miami
Osvaldo Beer	Syrian Arab Republic	Financial Controller	San Paulo
Dylan Ratke	Peru	Development Lead	Boston
Shaniya Jacobs	Peru	Developer	Chengdu

基础的表格用法。推荐 columns 写为常量，以提升性能

vue

<template>
  <ATable :columns="columns" :data-source="data" row-key="id" />
</template>

<script setup lang="ts">
import { ATable } from "@lite-code/aui-vue";

const columns = [
  { key: "name", title: "Name", dataIndex: "name" },
  { key: "country", title: "Country", dataIndex: "country" },
  { key: "position", title: "Position", dataIndex: "position" },
  { key: "office", title: "Office", dataIndex: "office" },
];

const data = [
  {
    id: 1,
    name: "Ephraim Wisozk",
    country: "Reunion",
    position: "Marketing Designer",
    office: "Miami",
  },
  {
    id: 2,
    name: "Osvaldo Beer",
    country: "Syrian Arab Republic",
    position: "Financial Controller",
    office: "San Paulo",
  },
  {
    id: 3,
    name: "Dylan Ratke",
    country: "Peru",
    position: "Development Lead",
    office: "Boston",
  },
  {
    id: 4,
    name: "Shaniya Jacobs",
    country: "Peru",
    position: "Developer",
    office: "Chengdu",
  },
];
</script>

空状态

Name	Country	Position	Office
暂无数据

dataSource 为空时展示空状态，可通过 empty 自定义内容

vue

<template>
  <ATable :columns="columns" :data-source="[]" row-key="id" />
</template>

<script setup lang="ts">
import { ATable } from "@lite-code/aui-vue";

const columns = [
  { key: "name", title: "Name", dataIndex: "name" },
  { key: "country", title: "Country", dataIndex: "country" },
  { key: "position", title: "Position", dataIndex: "position" },
  { key: "office", title: "Office", dataIndex: "office" },
];
</script>

边框和底纹

Name	Country	Position	Office
Ephraim Wisozk	Reunion	Marketing Designer	Miami
Osvaldo Beer	Syrian Arab Republic	Financial Controller	San Paulo
Dylan Ratke	Peru	Development Lead	Boston
Shaniya Jacobs	Peru	Developer	Chengdu

通过 striped 显示交错底纹；通过 bordered 显示边框

vue

<template>
  <ATable
    :columns="columns"
    :data-source="data"
    row-key="id"
    striped
    bordered
  />
</template>

<script setup lang="ts">
import { ATable } from "@lite-code/aui-vue";

const columns = [
  { key: "name", title: "Name", dataIndex: "name" },
  { key: "country", title: "Country", dataIndex: "country" },
  { key: "position", title: "Position", dataIndex: "position" },
  { key: "office", title: "Office", dataIndex: "office" },
];

const data = [
  {
    id: 1,
    name: "Ephraim Wisozk",
    country: "Reunion",
    position: "Marketing Designer",
    office: "Miami",
  },
  {
    id: 2,
    name: "Osvaldo Beer",
    country: "Syrian Arab Republic",
    position: "Financial Controller",
    office: "San Paulo",
  },
  {
    id: 3,
    name: "Dylan Ratke",
    country: "Peru",
    position: "Development Lead",
    office: "Boston",
  },
  {
    id: 4,
    name: "Shaniya Jacobs",
    country: "Peru",
    position: "Developer",
    office: "Chengdu",
  },
];
</script>

固定表头

id	Name	Country	Position	Office	Start Date
1	Clarabelle Sporer	Antigua and Barbuda	Support Lead	Surabaya	2013-01-01
2	Victor Boyer	United Arab Emirates	Integration Specialist	Berlin	2014-02-01
3	Kathryn Kassulke	Uganda	Marketing Designer	Santiago	2015-03-01
4	Jamarcus Walsh	Wallis and Futuna	Developer	Berlin	2016-04-01
5	Scottie Ritchie	French Guiana	Javascript Developer	Suzhou	2017-05-01
6	Jayce Mayert	Israel	Developer	Nagoya	2018-06-01
7	Abigayle Bradtke	Burundi	Javascript Developer	Santiago	2019-07-01
8	Ephraim Wisozk	Reunion	Marketing Designer	Miami	2020-08-01
9	Osvaldo Beer	Syrian Arab Republic	Financial Controller	San Paulo	2021-09-01
10	Dylan Ratke	Peru	Development Lead	Boston	2022-10-01
11	Clarabelle Sporer	Antigua and Barbuda	Support Lead	Surabaya	2023-11-01
12	Victor Boyer	United Arab Emirates	Integration Specialist	Berlin	2024-12-01
13	Kathryn Kassulke	Uganda	Marketing Designer	Santiago	2025-01-01
14	Jamarcus Walsh	Wallis and Futuna	Developer	Berlin	2026-02-01
15	Scottie Ritchie	French Guiana	Javascript Developer	Suzhou	2013-03-01
16	Jayce Mayert	Israel	Developer	Nagoya	2014-04-01
17	Abigayle Bradtke	Burundi	Javascript Developer	Santiago	2015-05-01
18	Ephraim Wisozk	Reunion	Marketing Designer	Miami	2016-06-01
19	Osvaldo Beer	Syrian Arab Republic	Financial Controller	San Paulo	2017-07-01
20	Dylan Ratke	Peru	Development Lead	Boston	2018-08-01

当 table 设置高度后，表头会固定在顶部

vue

<template>
  <ATable
    :columns="columns"
    :data-source="data"
    row-key="id"
    :scroll="{ y: 300 }"
  />
</template>

<script setup lang="ts">
import { ATable } from "@lite-code/aui-vue";

const columns = [
  { key: "id", title: "id", dataIndex: "id", width: 60 },
  { key: "name", title: "Name", dataIndex: "name", width: 180 },
  { key: "country", title: "Country", dataIndex: "country", width: 220 },
  { key: "position", title: "Position", dataIndex: "position", width: 200 },
  { key: "office", title: "Office", dataIndex: "office", width: 140 },
  { key: "startDate", title: "Start Date", dataIndex: "startDate", width: 120 },
];

const data = Array.from({ length: 20 }, (_, i) => ({
  id: i + 1,
  name: [
    "Clarabelle Sporer",
    "Victor Boyer",
    "Kathryn Kassulke",
    "Jamarcus Walsh",
    "Scottie Ritchie",
    "Jayce Mayert",
    "Abigayle Bradtke",
    "Ephraim Wisozk",
    "Osvaldo Beer",
    "Dylan Ratke",
  ][i % 10],
  country: [
    "Antigua and Barbuda",
    "United Arab Emirates",
    "Uganda",
    "Wallis and Futuna",
    "French Guiana",
    "Israel",
    "Burundi",
    "Reunion",
    "Syrian Arab Republic",
    "Peru",
  ][i % 10],
  position: [
    "Support Lead",
    "Integration Specialist",
    "Marketing Designer",
    "Developer",
    "Javascript Developer",
    "Developer",
    "Javascript Developer",
    "Marketing Designer",
    "Financial Controller",
    "Development Lead",
  ][i % 10],
  office: [
    "Surabaya",
    "Berlin",
    "Santiago",
    "Berlin",
    "Suzhou",
    "Nagoya",
    "Santiago",
    "Miami",
    "San Paulo",
    "Boston",
  ][i % 10],
  startDate: `${2013 + (i % 14)}-${String((i % 12) + 1).padStart(2, "0")}-01`,
}));
</script>

固定列

id	Name	Office	Start Date	1($)	2($)	3($)	4($)	5($)	6($)	7($)	8($)	9($)	10($)
1	Ciara Labadie	Kinshasa	2015-01-01	121,219	121,319	121,419	121,519	121,619	121,719	121,819	121,919	122,019	122,119
2	Ephraim Wisozk	Miami	2016-02-01	122,219	122,319	122,419	122,519	122,619	122,719	122,819	122,919	123,019	123,119
3	Osvaldo Beer	San Paulo	2017-03-01	123,219	123,319	123,419	123,519	123,619	123,719	123,819	123,919	124,019	124,119
4	Dylan Ratke	Boston	2018-04-01	124,219	124,319	124,419	124,519	124,619	124,719	124,819	124,919	125,019	125,119
5	Shaniya Jacobs	Chengdu	2019-05-01	125,219	125,319	125,419	125,519	125,619	125,719	125,819	125,919	126,019	126,119

设置 column 的 fixed 属性，可以固定列。只在设置了表格的 width 属性，并且 width 大于外部容器情况下才会生效

vue

<template>
  <ATable
    :columns="columns"
    :data-source="data"
    row-key="id"
    :scroll="{ x: 1400 }"
  />
</template>

<script setup lang="ts">
import { ATable } from "@lite-code/aui-vue";

const salaryColumns = Array.from({ length: 10 }, (_, i) => ({
  key: `salary${i + 1}`,
  title: `${i + 1}($)`,
  dataIndex: `salary${i + 1}`,
  width: 100,
  align: "right" as const,
}));

const columns = [
  {
    key: "id",
    title: "id",
    dataIndex: "id",
    width: 60,
    fixed: "left" as const,
  },
  {
    key: "name",
    title: "Name",
    dataIndex: "name",
    width: 160,
    fixed: "left" as const,
  },
  { key: "office", title: "Office", dataIndex: "office", width: 140 },
  { key: "startDate", title: "Start Date", dataIndex: "startDate", width: 120 },
  ...salaryColumns,
];

const data = Array.from({ length: 5 }, (_, i) => ({
  id: i + 1,
  name: [
    "Ciara Labadie",
    "Ephraim Wisozk",
    "Osvaldo Beer",
    "Dylan Ratke",
    "Shaniya Jacobs",
  ][i],
  office: ["Kinshasa", "Miami", "San Paulo", "Boston", "Chengdu"][i],
  startDate: `${2015 + i}-0${i + 1}-01`,
  ...Object.fromEntries(
    Array.from({ length: 10 }, (_, j) => [
      `salary${j + 1}`,
      (121219 + i * 1000 + j * 100).toLocaleString(),
    ])
  ),
}));
</script>

行选择

已选中：无

	Name	Country	Position	Office
	Ephraim Wisozk	Reunion	Marketing Designer	Miami
	Osvaldo Beer	Syrian Arab Republic	Financial Controller	San Paulo
	Dylan Ratke	Peru	Development Lead	Boston
	Shaniya Jacobs	Peru	Developer	Chengdu
	Ciara Labadie	Congo	Designer	Kinshasa

通过 rowSelection 开启行选择，支持全选、反选和禁用

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <div style="font-size: 13px; color: var(--aui-text-3, #8b8b8f)">
      已选中：{{ selectedKeys.length > 0 ? selectedKeys.join(", ") : "无" }}
    </div>
    <ATable
      :columns="columns"
      :data-source="data"
      row-key="id"
      :row-selection="{
        selectedRowKeys: selectedKeys,
        onChange: (keys) => (selectedKeys = keys),
      }"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ATable } from "@lite-code/aui-vue";

const columns = [
  { key: "name", title: "Name", dataIndex: "name" },
  { key: "country", title: "Country", dataIndex: "country" },
  { key: "position", title: "Position", dataIndex: "position" },
  { key: "office", title: "Office", dataIndex: "office" },
];

const data = [
  {
    id: 1,
    name: "Ephraim Wisozk",
    country: "Reunion",
    position: "Marketing Designer",
    office: "Miami",
  },
  {
    id: 2,
    name: "Osvaldo Beer",
    country: "Syrian Arab Republic",
    position: "Financial Controller",
    office: "San Paulo",
  },
  {
    id: 3,
    name: "Dylan Ratke",
    country: "Peru",
    position: "Development Lead",
    office: "Boston",
  },
  {
    id: 4,
    name: "Shaniya Jacobs",
    country: "Peru",
    position: "Developer",
    office: "Chengdu",
  },
  {
    id: 5,
    name: "Ciara Labadie",
    country: "Congo",
    position: "Designer",
    office: "Kinshasa",
  },
];

const selectedKeys = ref<(string | number)[]>([]);
</script>

单选

	id	Name
	1	Kellen Ondricka
	2	Dell Pagac
	3	Penelope Jerde
	4	Ardella Bailey
	5	Cornelius Weimann
	6	Tatyana Will
	7	Kurt Purdy

设置 radio 属性实现单选效果

vue

<template>
  <ATable
    :columns="columns"
    :data-source="data"
    row-key="id"
    :row-selection="{
      type: 'radio',
      selectedRowKeys: selectedKey,
      onChange: (keys) => (selectedKey = keys),
    }"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ATable } from "@lite-code/aui-vue";

const columns = [
  { key: "id", title: "id", dataIndex: "id", width: 80 },
  { key: "name", title: "Name", dataIndex: "name" },
];

const data = [
  { id: 1, name: "Kellen Ondricka" },
  { id: 2, name: "Dell Pagac" },
  { id: 3, name: "Penelope Jerde" },
  { id: 4, name: "Ardella Bailey" },
  { id: 5, name: "Cornelius Weimann" },
  { id: 6, name: "Tatyana Will" },
  { id: 7, name: "Kurt Purdy" },
];

const selectedKey = ref<(string | number)[]>([1]);
</script>

分页

ID	Name	Role	Status	Join Date
1	User 001	Admin	Inactive	2024-01-01
2	User 002	Editor	Active	2024-02-01
3	User 003	Viewer	Active	2024-03-01
4	User 004	Admin	Active	2024-04-01
5	User 005	Editor	Inactive	2024-05-01
6	User 006	Viewer	Active	2024-06-01
7	User 007	Admin	Active	2024-07-01
8	User 008	Editor	Active	2024-08-01
9	User 009	Viewer	Inactive	2024-09-01
10	User 010	Admin	Active	2024-10-01

共 46 条，第 1–10 条10 条/页20 条/页50 条/页跳至页

通过 pagination 属性集成分页，支持 showTotal、showSizeChanger、showQuickJumper 等所有分页配置

vue

<template>
  <ATable
    :columns="columns"
    :data-source="data"
    row-key="id"
    size="sm"
    :scroll="{ y: 460 }"
    :pagination="{
      defaultPageSize: 10,
      showSizeChanger: true,
      showQuickJumper: true,
      pageSizeOptions: [10, 20, 50],
      showTotal: (total, [s, e]) => `共 ${total} 条，第 ${s}–${e} 条`,
    }"
  />
</template>

<script setup lang="ts">
import { ATable } from "@lite-code/aui-vue";

const data = Array.from({ length: 46 }, (_, i) => ({
  id: i + 1,
  name: `User ${String(i + 1).padStart(3, "0")}`,
  role: ["Admin", "Editor", "Viewer"][i % 3],
  status: i % 4 === 0 ? "Inactive" : "Active",
  joinDate: `2024-${String((i % 12) + 1).padStart(2, "0")}-01`,
}));

const columns = [
  { key: "id", title: "ID", dataIndex: "id", width: 80 },
  { key: "name", title: "Name", dataIndex: "name", width: 160 },
  { key: "role", title: "Role", dataIndex: "role", width: 120 },
  { key: "status", title: "Status", dataIndex: "status", width: 120 },
  { key: "joinDate", title: "Join Date", dataIndex: "joinDate", width: 140 },
];
</script>

虚拟滚动

共 10,000 条数据，开启虚拟滚动后 DOM 中始终只保持少量节点

ID	Name	Title	Department	City	Salary
1	User 00001	Engineer	Engineering	Beijing	¥8,000
2	User 00002	Designer	Product	Shanghai	¥9,000
3	User 00003	Manager	Marketing	Chengdu	¥10,000
4	User 00004	Analyst	Finance	Shenzhen	¥11,000
5	User 00005	Developer	Operations	Hangzhou	¥12,000
6	User 00006	Consultant	HR	Wuhan	¥13,000
7	User 00007	Engineer	Engineering	Nanjing	¥14,000
8	User 00008	Designer	Product	Beijing	¥15,000
9	User 00009	Manager	Marketing	Shanghai	¥16,000
10	User 00010	Analyst	Finance	Chengdu	¥17,000
11	User 00011	Developer	Operations	Shenzhen	¥18,000
12	User 00012	Consultant	HR	Hangzhou	¥19,000
13	User 00013	Engineer	Engineering	Wuhan	¥20,000
14	User 00014	Designer	Product	Nanjing	¥21,000
15	User 00015	Manager	Marketing	Beijing	¥22,000

virtual + scroll.y 开启虚拟滚动，10,000 行数据 DOM 中始终只渲染可视区域的行

vue

<template>
  <div>
    <div
      style="
        margin-bottom: 12px;
        font-size: 13px;
        color: var(--aui-text-3, #8b8b8f);
      "
    >
      共 {{ data.length.toLocaleString() }} 条数据，开启虚拟滚动后 DOM
      中始终只保持少量节点
    </div>
    <ATable
      :columns="columns"
      :data-source="data"
      row-key="id"
      :scroll="{ y: 360 }"
      virtual
    />
  </div>
</template>

<script setup lang="ts">
import { ATable } from "@lite-code/aui-vue";

const TITLES = [
  "Engineer",
  "Designer",
  "Manager",
  "Analyst",
  "Developer",
  "Consultant",
];
const CITIES = [
  "Beijing",
  "Shanghai",
  "Chengdu",
  "Shenzhen",
  "Hangzhou",
  "Wuhan",
  "Nanjing",
];
const DEPTS = [
  "Engineering",
  "Product",
  "Marketing",
  "Finance",
  "Operations",
  "HR",
];

const data = Array.from({ length: 10000 }, (_, i) => ({
  id: i + 1,
  name: `User ${String(i + 1).padStart(5, "0")}`,
  title: TITLES[i % TITLES.length],
  department: DEPTS[i % DEPTS.length],
  city: CITIES[i % CITIES.length],
  salary: `¥${(((i % 20) + 8) * 1000).toLocaleString()}`,
}));

const columns = [
  { key: "id", title: "ID", dataIndex: "id", width: 80 },
  { key: "name", title: "Name", dataIndex: "name", width: 140 },
  { key: "title", title: "Title", dataIndex: "title", width: 160 },
  {
    key: "department",
    title: "Department",
    dataIndex: "department",
    width: 160,
  },
  { key: "city", title: "City", dataIndex: "city", width: 120 },
  { key: "salary", title: "Salary", dataIndex: "salary", width: 120 },
];
</script>

分组列

在 column 上设置 group 字段，相同 group 值的相邻列会被合并到同一个组标题下，形成双行表头。

id	Name		Info
	First Name	Last Name	Age	City
1	Ciara	Labadie	28	New York
2	Ethan	Morris	34	Los Angeles
3	Sophia	Chen	25	Chicago
4	Marcus	Johnson	41	Houston

Name 分组包含 First Name 和 Last Name，Info 分组包含 Age 和 City

vue

<template>
  <ATable :columns="columns" :data-source="data" row-key="id" bordered />
</template>

<script setup lang="ts">
import { ATable } from "@lite-code/aui-vue";

const columns = [
  { key: "id", title: "id", dataIndex: "id", width: 60 },
  {
    key: "firstName",
    title: "First Name",
    dataIndex: "firstName",
    width: 140,
    group: "Name",
  },
  {
    key: "lastName",
    title: "Last Name",
    dataIndex: "lastName",
    width: 140,
    group: "Name",
  },
  { key: "age", title: "Age", dataIndex: "age", width: 80, group: "Info" },
  { key: "city", title: "City", dataIndex: "city", width: 140, group: "Info" },
];

const data = [
  { id: 1, firstName: "Ciara", lastName: "Labadie", age: 28, city: "New York" },
  {
    id: 2,
    firstName: "Ethan",
    lastName: "Morris",
    age: 34,
    city: "Los Angeles",
  },
  { id: 3, firstName: "Sophia", lastName: "Chen", age: 25, city: "Chicago" },
  { id: 4, firstName: "Marcus", lastName: "Johnson", age: 41, city: "Houston" },
];
</script>

工具栏与行操作

title 显示表格标题，tools 配置工具栏按钮，onRefresh 显示刷新按钮，rowOperations 在每行末尾追加操作列。

用户列表

ID	姓名	角色	状态	操作
1001	张三	管理员	启用
1002	李四	编辑	禁用
1003	王五	访客	启用
1004	赵六	编辑	启用

工具栏 tools + 行操作 rowOperations，超出 maxCount 的菜单收入「更多」下拉

vue

<template>
  <ATable
    :columns="columns"
    :data-source="data"
    row-key="id"
    bordered
    title="用户列表"
    :on-refresh="() => (data = [...initialData])"
    :tools="[
      {
        type: 'primary',
        label: '新增用户',
        icon: 'plus',
        disabled: ({ data: d }) => d.length >= 6,
        onClick: ({ data: d }) => {
          const nextId = Math.max(...d.map((r) => r.id)) + 1;
          data = [
            ...d,
            { id: nextId, name: `用户${nextId}`, role: '访客', status: '启用' },
          ];
        },
      },
    ]"
    :row-operations="{
      width: 200,
      maxCount: 2,
      menus: [
        {
          label: '编辑',
          disabled: ({ record }) => record.id === 1001,
          onClick: ({ record }) => alert(`编辑：${record.name}`),
        },
        {
          label: '查看',
          visible: ({ record }) => record.id !== 1002,
          onClick: ({ record }) => alert(`查看：${record.name}`),
        },
        {
          label: '删除',
          confirm: '确认删除该用户？',
          onClick: ({ record }) => {
            data = data.filter((r) => r.id !== record.id);
          },
        },
        {
          label: '禁用',
          visible: ({ record }) => record.status === '启用',
          onClick: ({ record }) => {
            data = data.map((r) =>
              r.id === record.id ? { ...r, status: '禁用' } : r
            );
          },
        },
      ],
    }"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ATable } from "@lite-code/aui-vue";

const initialData = [
  { id: 1001, name: "张三", role: "管理员", status: "启用" },
  { id: 1002, name: "李四", role: "编辑", status: "禁用" },
  { id: 1003, name: "王五", role: "访客", status: "启用" },
  { id: 1004, name: "赵六", role: "编辑", status: "启用" },
];

const columns = [
  { key: "id", title: "ID", dataIndex: "id", width: 80 },
  { key: "name", title: "姓名", dataIndex: "name", width: 120 },
  { key: "role", title: "角色", dataIndex: "role", width: 120 },
  { key: "status", title: "状态", dataIndex: "status", width: 100 },
];

const data = ref([...initialData]);
</script>

树形数据

数据项包含 children 字段时自动进入树形模式，默认字段名为 children，可通过 childrenColumnName 更改。

Name	Country	Position	Office
Ephraim Wisozk	Reunion	Marketing Designer	Miami
Osvaldo Beer	Syrian Arab Republic	Financial Controller	San Paulo
Shaniya Jacobs	Peru	Developer	Chengdu
Dylan Ratke	Peru	Development Lead	Boston
Wolo Casho	Franch	Developer	Jiangsu
Lou Woch	China	Befined	Beijing
Endted Wang	Moran	Ameri Kich	Fiour

设置 defaultExpandedRowKeys 或 expandedRowKeys 控制展开状态

vue

<template>
  <ATable
    :columns="columns"
    :data-source="data"
    row-key="id"
    :default-expanded-row-keys="[3]"
  />
</template>

<script setup lang="ts">
import { ATable } from "@lite-code/aui-vue";

const columns = [
  { key: "name", title: "Name", dataIndex: "name" },
  { key: "country", title: "Country", dataIndex: "country" },
  { key: "position", title: "Position", dataIndex: "position" },
  { key: "office", title: "Office", dataIndex: "office" },
];

const data = [
  {
    id: 1,
    name: "Ephraim Wisozk",
    country: "Reunion",
    position: "Marketing Designer",
    office: "Miami",
    children: [
      {
        id: 11,
        name: "Mable Crona",
        country: "Iceland",
        position: "UI Designer",
        office: "Reykjavik",
      },
      {
        id: 12,
        name: "Jada Tillman",
        country: "Finland",
        position: "Frontend Dev",
        office: "Helsinki",
      },
    ],
  },
  {
    id: 2,
    name: "Osvaldo Beer",
    country: "Syrian Arab Republic",
    position: "Financial Controller",
    office: "San Paulo",
  },
  {
    id: 3,
    name: "Shaniya Jacobs",
    country: "Peru",
    position: "Developer",
    office: "Chengdu",
    children: [
      {
        id: 31,
        name: "Dylan Ratke",
        country: "Peru",
        position: "Development Lead",
        office: "Boston",
      },
    ],
  },
  {
    id: 4,
    name: "Wolo Casho",
    country: "Franch",
    position: "Developer",
    office: "Jiangsu",
  },
  {
    id: 5,
    name: "Lou Woch",
    country: "China",
    position: "Befined",
    office: "Beijing",
    children: [
      {
        id: 51,
        name: "Harley Sipes",
        country: "Canada",
        position: "Backend Dev",
        office: "Toronto",
      },
      {
        id: 52,
        name: "Eunice Kemmer",
        country: "Australia",
        position: "Product Manager",
        office: "Sydney",
      },
    ],
  },
  {
    id: 6,
    name: "Endted Wang",
    country: "Moran",
    position: "Ameri Kich",
    office: "Fiour",
    children: [
      {
        id: 61,
        name: "Kira Schulist",
        country: "Germany",
        position: "Data Analyst",
        office: "Berlin",
      },
    ],
  },
];
</script>

底部汇总

通过 summary 属性渲染底部汇总行，支持 colSpan 合并列。

id	Name		Country	Position	Office	Salary($)
	First Name	Last Name
3	Penelope	Jerde	Cuba	Developer	Quanzhou	420139
4	Ardella	Bailey	Jamaica	Regional Director	Santiago	367484
5	Cornelius	Weimann	Estonia	Javascript Developer	Jakarta	86947
6	Tatyana	Will	Romania	Sales Assistant	Guadalajara	138292
7	Kurt	Purdy	Lao People's Democratic Republic	Sales Assistant	Shanghai	339952
Summary			summary content			1,352,814

通过 summary 属性来渲染底部信息

vue

<template>
  <ATable
    :columns="columns"
    :data-source="data"
    bordered
    row-key="id"
    :scroll="{ x: 900 }"
    :summary="summary"
  />
</template>

<script setup lang="ts">
import { h } from "vue";
import { ATable } from "@lite-code/aui-vue";

const columns = [
  { key: "id", title: "id", dataIndex: "id", width: 60 },
  {
    key: "firstName",
    title: "First Name",
    dataIndex: "firstName",
    group: "Name",
  },
  { key: "lastName", title: "Last Name", dataIndex: "lastName", group: "Name" },
  { key: "country", title: "Country", dataIndex: "country" },
  { key: "position", title: "Position", dataIndex: "position" },
  { key: "office", title: "Office", dataIndex: "office" },
  {
    key: "salary",
    title: "Salary($)",
    dataIndex: "salary",
    align: "right" as const,
  },
];

const data = [
  {
    id: 3,
    firstName: "Penelope",
    lastName: "Jerde",
    country: "Cuba",
    position: "Developer",
    office: "Quanzhou",
    salary: 420139,
  },
  {
    id: 4,
    firstName: "Ardella",
    lastName: "Bailey",
    country: "Jamaica",
    position: "Regional Director",
    office: "Santiago",
    salary: 367484,
  },
  {
    id: 5,
    firstName: "Cornelius",
    lastName: "Weimann",
    country: "Estonia",
    position: "Javascript Developer",
    office: "Jakarta",
    salary: 86947,
  },
  {
    id: 6,
    firstName: "Tatyana",
    lastName: "Will",
    country: "Romania",
    position: "Sales Assistant",
    office: "Guadalajara",
    salary: 138292,
  },
  {
    id: 7,
    firstName: "Kurt",
    lastName: "Purdy",
    country: "Lao People's Democratic Republic",
    position: "Sales Assistant",
    office: "Shanghai",
    salary: 339952,
  },
];

const totalSalary = data.reduce((sum, r) => sum + r.salary, 0);

const summary = [
  [
    { render: () => h("span", {}, "Summary"), colSpan: 3 },
    { render: () => h("span", {}, "summary content"), colSpan: 3 },
    {
      render: () =>
        h("span", { style: { fontWeight: 600 } }, totalSalary.toLocaleString()),
    },
  ],
];
</script>

API

Table Props

属性	类型	默认值	说明
columns	TableColumn[]	[]	列定义
dataSource	T[]	[]	数据源
rowKey	string | ((record: T) => string | number)	—	行唯一键
bordered	boolean	false	显示列边框
striped	boolean	false	交错底纹
size	'sm' | 'md' | 'lg'	'md'	行高尺寸
scroll	{ x?: number|string; y?: number|string }	—	横/纵向滚动，y 同时固定表头
loading	boolean	false	加载状态
rowSelection	TableRowSelection	—	行选择配置
virtual	boolean	false	开启虚拟滚动，需配合 scroll.y（数字）使用
pagination	TablePaginationConfig | false	—	分页配置，false 关闭分页
title	string	—	表格标题（显示工具栏）
tools	TableToolItem[]	—	工具栏按钮列表
rowOperations	TableRowOperations	—	行操作列配置
onRefresh	() => void	—	工具栏刷新按钮回调
summary	SummaryCell[][]	—	底部汇总行，每个子数组为一行
childrenColumnName	string	'children'	树形数据子节点字段名
expandedRowKeys	(string | number)[]	—	受控展开行（不传则非受控）
defaultExpandedRowKeys	(string | number)[]	—	非受控模式下的默认展开行
onExpand	(expanded: boolean, record: T) => void	—	展开/折叠回调
indentSize	number	16	树形缩进像素值

TableColumn

属性	类型	说明
key	string	列唯一标识
title	string	列标题
dataIndex	string	数据字段名，支持 'a.b' 嵌套
width	number | string	列宽，固定列必须为数字（px）
align	'left' | 'center' | 'right'	对齐方式
fixed	'left' | 'right'	固定列方向，需配合 scroll.x
group	string	分组名，相邻且相同的列合并为双行表头
render	(value, record, index) => VNode | string	自定义渲染

TableRowSelection

属性	类型	默认值	说明
selectedRowKeys	(string | number)[]	—	受控选中项（不传则非受控）
onChange	(keys, rows) => void	—	选中变化回调
type	'checkbox' | 'radio'	'checkbox'	多选或单选
getCheckboxProps	(record) => { disabled?: boolean }	—	按行禁用

SummaryCell

属性	类型	说明
render	() => VNode | string	单元格渲染函数
colSpan	number	横向合并列数
rowSpan	number	纵向合并行数

TableToolItem

属性	类型	说明
label	string	按钮文字
icon	string	按钮图标名
type	'primary' | 'secondary' | 'outline' | 'ghost'	按钮变体，默认 primary
disabled	boolean | (({ data }) => boolean)	禁用，可根据当前数据动态计算
onClick	({ data: T[] }) => void	点击回调，接收当前 dataSource

TableRowOperations

属性	类型	默认值	说明
width	number	—	操作列宽度（px）
maxCount	number	3	行内显示最大数，其余收入「更多」
menus	RowMenuItem[]	—	操作项列表

RowMenuItem

属性	类型	说明
label	string	操作文字
confirm	string	点击前弹出确认框，值为提示文字
disabled	boolean | (({ record, search }) => boolean)	禁用
visible	boolean | (({ record, search }) => boolean)	隐藏（false 时不渲染该项）
onClick	({ record: T, search?: () => void }) => void | Promise	点击回调，search 为 onRefresh 的别名