表格 Table

这是一个表格，用于展示有行、列结构的内容。

WARNING

为确保行展开和选择行功能正常工作，需要这些功能时，请务必确保 data 数组中的每个数据项都包含与 rowKey（默认为 'key'）参数值同名的字段，且该字段的值在所有数据中保持唯一。

如果需要进行后端分页，请参考 异步分页。

如果需要进行跨页全选，请参考 跨页全选。

基础使用

data 属性为表格当前数据，columns 属性设置表格列。

请为 columns 中的元素配置 key 属性作为行的唯一标识。

请为 data 中的元素配置 key 属性作为行的唯一标识，这个唯一标识字段可以通过 rowKey 控制。

Name	Age	Email
Alice	25	alice@example.com
Bob	30	bob@example.com
Charlie	35	charlie@example.com

1

隐藏源代码

对齐方式

columns[].align 配置单元格文本的对齐方式，默认为 'left'。

Name	Age	Email
Olivia	28	olivia@example.com
James	32	james@example.com
Sophia	24	sophia@example.com
William	29	william@example.com
Emma	31	emma@example.com

1

隐藏源代码

自定义单元格

可以用以下方式自定义单元格：

• columns[].slotName 配置单元格内容插槽。
• columns[].labelSlotName 配置表头单元格内容插槽。
• columns[].render 配置单元格内容渲染函数。
• columns[].labelRender 配置表头单元格内容渲染函数。
• columns[].cellProps 配置单元格属性。
• columns[].labelCellProps 配置表头单元格属性。
• columns[].contentProps 配置单元格属性。
• columns[].labelContentProps 配置表头单元格属性。

Name	Age	Email	Status Active / Inactive	Actions
Emma Johnson	32	emma.johnson@example.com	active
James Miller	45	jmiller@test.net	inactive
Sophia Chen	28	schen@demo.org	active
William Brown	61	wbrown55@sample.co	inactive
Olivia Davis	39	odavis@mail.io	active

1

隐藏源代码

列宽度

columns[].width 和 columns[].minWidth 配置单元格宽度。

设置 columns[].width 时，请至少留下一列不设置，以自适应表格实际宽度。

Name	Role	Email	Address
Olivia Martinez	Admin	olivia.martinez@company.com	123 Maple Street, New York, NY 10001
James Wilson	Developer	james.wilson@company.com	456 Oak Avenue, San Francisco, CA 94102
Sophia Chen	Designer	sophia.chen@company.com	789 Pine Road, Chicago, IL 60601
William Taylor	Manager	william.taylor@company.com	321 Elm Boulevard, Austin, TX 73301
Emma Johnson	Analyst	emma.johnson@company.com	654 Cedar Lane, Seattle, WA 98101

1

隐藏源代码

边框和底纹

bordered 设置表格边框，默认展示所有边框。variant 设置表格背景样式变体，默认纯色背景（'normal'）。

Three-Line Table

Bordered:

Table

Side

Head

Row

Col

Variant:

Normal

Striped

Checkered

Name	Age	Email
Alice	25	alice@example.com
Bob	30	bob@example.com
Charlie	35	charlie@example.com

1

隐藏源代码

表格高度

由于 display: table 的特性，当为该 Table 组件最外层元素设置较小的 height 或者 max-height 时，会得到预期外的效果，<table> 的高度仍然会被子元素撑开。

我们推荐使用 tableAreaProps 属性，设置固定或者动态的表格高度，例如 :table-area-props="{ style: 'max-height: 400px' }"。

Name	Role	Level	Salary	Address
Aric Ironfist	Blacksmith	42	2800	Iron Forge Street 12
Lyra Swiftarrow	Hunter	36	2200	Forest Edge Cottage
Borin Stonebeard	Miner	28	1800	Mountain Hall 7
Elara Moonshadow	Alchemist	51	3200	Apothecary Lane 3
Garrick Stormblade	Knight	65	4500	Castle Barracks
Mira Whisperwind	Bard	24	1500	Tavern Square 5
Thrain Forgeheart	Engineer	47	2900	Workshop District 9
Sylas Greenleaf	Druid	58	3800	Ancient Grove
Kaelen Firehand	Pyromancer	61	4200	Mage Tower East
Freya Shieldmaiden	Guard Captain	54	3600	Guard Post Central
Jorin Goldfinder	Merchant	33	2500	Market Square 8
Nyssa Lightfoot	Rogue	39	2700	Shadow Alley 2
Torin Boulderbreaker	Stone Mason	31	2100	Quarry Road 4
Liana Starweaver	Astrologer	45	3100	Observatory Hill
Finn Riverstride	Fisherman	22	1400	Dockside Hut
Rowan Oakenshield	Carpenter	27	1700	Timber Yard 6
Vera Nightshade	Herbalist	34	2300	Herb Garden Cottage
Draven Bloodedge	Mercenary	49	3300	Fighter's Guild
Mara Swiftcurrent	Sailor	26	1600	Harbor Watch 3
Orin Deepdelver	Archaeologist	43	3000	Explorer's Lodge

隐藏源代码

滚动区域

scroll.x 配置滚动区域宽度。Table 组件会在内部根据列配置计算出一个最小的滚动区域宽度，当表格实际宽度小于它和 scroll.x 的最大值时，就会展示横向滚动条。

Name	Age	Email
Alice	25	alice@example.com
Bob	30	bob@example.com
Charlie	35	charlie@example.com

1

隐藏源代码

合并单元格

通过 spanMethod 属性配置合并单元格。

BuildingType	Coord	Level	Income	Maintain
Blacksmith	(23, 18)	3	1800	450
	(25, 20)	4	2400	600
Tavern	(34, 27)	2	1600	400
	(36, 25)	5	3200	800
Market	(41, 33)	3	2100	525
	(43, 35)	6	4000	1000
Farm	(15, 12)	2	900	225
	(18, 14)	4	2000	500
Barracks	(9, 39)	3	1500	375
	(11, 37)	5	2800	700

1

2

隐藏源代码

固定表头和固定列

Table 默认固定表头，可通过 fixedHead 属性配置。

在 columns 属性的子元素中设置 fixed: 'left' 或者 fixed: 'right' 进行固定列。

WARNING

固定的列在展示时，如果位于表格中间，会移动到相应的固定的两侧。

固定列配置在多级表头的情况下，只对根节点有效。

Id	Name	Age	Phone	Email	Address
1	John Smith	28	+1-555-101-2001	john.smith@example.com	123 Main St, Springfield, IL 62704
2	Jane Johnson	34	+1-555-102-2002	jane.johnson@example.com	456 Oak Ave, Shelbyville, IL 62706
3	Bob Williams	22	+1-555-103-2003	bob.williams@example.com	789 Pine Rd, Capital City, IL 62708
4	Alice Brown	45	+1-555-104-2004	alice.brown@example.com	101 Maple Dr, Metropolis, IL 62710
5	Charlie Jones	31	+1-555-105-2005	charlie.jones@example.com	202 Cedar Ln, Smallville, IL 62712
6	Diana Garcia	29	+1-555-106-2006	diana.garcia@example.com	303 Birch St, Gotham, NY 10001
7	Eve Miller	38	+1-555-107-2007	eve.miller@example.com	404 Elm Pl, Star City, NY 10003
8	Frank Davis	26	+1-555-108-2008	frank.davis@example.com	505 Walnut Way, Central City, NY 10005
9	Grace Rodriguez	41	+1-555-109-2009	grace.rodriguez@example.com	606 Spruce Ct, Coast City, CA 90210
10	Henry Martinez	33	+1-555-110-2010	henry.martinez@example.com	707 Ash Blvd, Emerald City, CA 90212
11	Ivy Hernandez	27	+1-555-111-2011	ivy.hernandez@example.com	808 Poplar Ave, Keystone City, CA 90214
12	Jack Lopez	36	+1-555-112-2012	jack.lopez@example.com	909 Fir St, National City, TX 75001
13	Kate Gonzalez	24	+1-555-113-2013	kate.gonzalez@example.com	111 Redwood Dr, Opal City, TX 75003
14	Leo Wilson	39	+1-555-114-2014	leo.wilson@example.com	222 Sequoia Ln, Ivy Town, TX 75005
15	Mia Anderson	30	+1-555-115-2015	mia.anderson@example.com	333 Magnolia Rd, Hub City, FL 32003
16	Nick Thomas	42	+1-555-116-2016	nick.thomas@example.com	444 Willow Cir, Blue Valley, FL 32005
17	Olivia Taylor	35	+1-555-117-2017	olivia.taylor@example.com	555 Cypress St, Starling City, FL 32007
18	Paul Moore	23	+1-555-118-2018	paul.moore@example.com	666 Juniper Way, Fawcett City, WA 98001
19	Quinn Jackson	37	+1-555-119-2019	quinn.jackson@example.com	777 Sycamore Pl, Gateway City, WA 98003
20	Ryan Martin	32	+1-555-120-2020	ryan.martin@example.com	888 Laurel Ave, Coral City, WA 98005

隐藏源代码

多级表头

在 columns 属性的子元素中设置 children 开启多级表头。

多级表头情况下，表头区域会展示单元格边框。

Basic Information		Contact Information			Work Information				Status
ID	Name	Contact Details		Address	Department	Salary Information
		Phone	Email			Base Salary	Bonus	Total
1	John Smith	+1 (212) 555-0198	john.smith@example.com	123 Main St, New York, NY	Sales	5000	1000	6000	Active
2	Emily Johnson	+44 20 7946 0958	emily.j@example.com	456 Park Ave, Los Angeles, CA	Marketing	4500	800	5300	Active
3	Michael Brown	+61 2 9876 5432	m.brown@example.com	789 Broadway, Chicago, IL	Engineering	7000	1500	8500	Active
4	Sarah Davis	+49 30 12345678	sarah.davis@example.com	101 Oak St, Houston, TX	HR	4800	600	5400	On Leave
5	David Wilson	+33 1 2345 6789	d.wilson@example.com	202 Pine Rd, Phoenix, AZ	Finance	6500	1200	7700	Active
6	Jennifer Taylor	+81 3 1234 5678	jennifer.t@example.com	303 Elm St, Philadelphia, PA	Sales	5200	900	6100	Active
7	Robert Miller	+1 (415) 555-0134	robert.m@example.com	404 Cedar Ave, San Antonio, TX	Engineering	7200	1600	8800	Active
8	Lisa Anderson	+44 131 496 0600	lisa.a@example.com	505 Maple Dr, San Diego, CA	Marketing	4700	700	5400	Inactive
9	William Thomas	+61 8 8123 4567	william.t@example.com	606 Birch Ln, Dallas, TX	Finance	6800	1300	8100	Active
10	Maria Jackson	+49 89 98765432	maria.j@example.com	707 Walnut St, San Jose, CA	HR	4900	650	5550	Active

1

隐藏源代码

行选择

通过 selection 配置行选择。selectedKey 控制选择项（受控模式），不传或为 undefined 时，为非受控模式，可通过 defaultSelectedKey 配置默认值。

设置 columns[].disabled 禁用该行的选择器。

当存在左侧固定的列时，行选择列也会固定在左侧。

Multiple

	ID	Name	Email	City	Address
	1001	Emma Johnson	emma.johnson@example.com	New York	123 Main Street, Apt 4B
	1002	James Wilson	j.wilson@example.com	Los Angeles	456 Oak Avenue
	1003	Sophia Chen	sophia.chen@example.com	Chicago	789 Pine Road, Suite 12
	1004	Michael Brown	m.brown@example.com	Miami	321 Beach Boulevard
	1005	Olivia Davis	olivia.davis@example.com	Seattle	654 Lakeview Drive

1

selectedKeys: []

隐藏源代码

展开行

通过 expandable 配置行选择。expandedKey 控制展开的行（受控模式），不传或为 undefined 时，为非受控模式，可通过 defaultExpandedKey 配置默认值。

展开行内容，通过 columns[].expand 或者 expand 插槽设置，为空时（设置了 expand 插槽情况下则为 false）不展示展开按钮。

当存在左侧固定的列时，展开按钮列也会固定在左侧。

	ID	Name
	1001	Emma Johnson
	1002	James Wilson
	1003	Sophia Chen
	1004	Michael Brown
	1005	Olivia Davis

1

	ID	Name
	1001	Emma Johnson
	1002	James Wilson
	1003	Sophia Chen
	1004	Michael Brown
	1005	Olivia Davis

1

expandedKeys: []

隐藏源代码

排序

通过 columns[].sortable 配置排序。sortOrder 控制每列排序状态（受控模式），不传或为 undefined 时，为非受控模式，可通过 defaultSortOrder 配置默认值。

columns[].sortable 中的 defaultSortOrder 属性也可以配置该列的默认值。

其中，sortMethod 属性设置为 'custom' 时，没有排序效果。可以通过监听 sortOrderChange 事件进行后端排序。

不配置 sortMethod 属性时将使用默认的比较器，基于 JS 原生的大于小于运算逻辑。

Name	Age	Email
Emma	31	emma@example.com
James	32	james@example.com
Olivia	28	olivia@example.com
Sophia	24	sophia@example.com
William	29	william@example.com

1

sortOrder: { "name": "asc" }

隐藏源代码

多级排序

columns[].sortable 的 sortMethod 设置属性 multiple 为 true，开启多级排序，此时可以通过 priority 属性设置列的优先级，数值越大越优先。

WARNING

多级排序和单级排序是互斥的，触发其中一种排序方式的时候，会清空另一种排序方式的选择。

Name	Age	Email
Emma	31	emma@example.com
James	32	james@example.com
Olivia	28	olivia@example.com
Sophia	24	sophia@example.com
William	29	william@example.com

1

sortOrder: { "name": "asc" }

隐藏源代码

筛选

columns[].filterable 配置筛选。filterValue 控制每列排序状态（受控模式），不传或为 undefined 时，为非受控模式，可通过 defaultFilterValue 配置默认值。

columns[].filterable 中的 defaultFilterValue 属性也可以配置该列的默认值。

不配置 filterMethod 属性时将使用默认的比较器，基于 JS 原生的 === 运算逻辑。

Name	Base Salary	Bonus	Total	Status
James Wilson	8500	420	8920	active
Michael Brown	11200	150	11350	active
Robert Taylor	9800	920	10820	active
Jennifer Miller	6300	310	6610	active
Lisa Martinez	4500	230	4730	active
Amanda Clark	2900	0	2900	active

1

filterValue: { "status": [ "active" ] }

隐藏源代码

总结行

summary 属性配置总结行。

• summary.data 设置总结行内容。
• summary.summaryText 可以设置总结行第一列的文本。
• summary.placement 用于调整总结行的位置，可选 'start' 和 'end'（默认），让总结行位于数据区域头部或者脚部。
• summary.fixed 配置总结行是否固定，默认固定总结行。
• summary.spanMethod 配置总结行区域的单元格合并。

WARNING

总结行位于数据区域头部时，固定总结行需要固定表头生效方可生效。

Unfixed

Fixed

Placement:

End

Start

Name	Base Salary	Bonus	Total	Status
Emma Johnson	8500	420	8920	active
David Smith	6500	780	7280	inactive
Sophia Williams	11200	150	11350	active
Michael Brown	4200	0	4200	inactive
Olivia Davis	9800	920	10720	active
James Wilson	7300	310	7610	active
Sarah Miller	10500	850	11350	inactive
Robert Taylor	4200	190	4390	active
Jennifer Anderson	8900	0	8900	inactive
Thomas Clark	11500	970	12470	active
Sum	82600	4590	87190
Average	8260	459	8719

1

隐藏源代码

加载状态

通过设置 loading 配置表格的加载状态。

not loading

Name	Age	Email
Alice	25	alice@example.com
Bob	30	bob@example.com
Charlie	35	charlie@example.com

1

隐藏源代码

前端分页

表格组件默认支持对传入的数据自动分页，可以通过 pagination 属性设置分页配置。

ID	User	Email	Register
1	Michael Garcia	michael.garcia@example.com	2026-01-12
2	Emma Williams	emma.williams@example.com	2026-06-07
3	James Rodriguez	james.rodriguez@example.com	2026-07-15
4	Melissa Rodriguez	melissa.rodriguez@example.com	2026-08-25
5	Matthew Harris	matthew.harris@example.com	2026-02-25
6	Robert Jackson	robert.jackson@example.com	2026-05-05
7	Michael Thompson	michael.thompson@example.com	2026-08-17
8	Michael Garcia	michael.garcia@example.com	2026-08-31
9	Joshua Davis	joshua.davis@example.com	2026-08-19
10	Jessica Williams	jessica.williams@example.com	2026-01-25

Total 50

1

2

3

4

5

10 / Page

Go to

page: 1; pageSize: 10

隐藏源代码

异步分页

设置 pagination.paginateMethod 为 'custom 时，表格不会进行自动排序，常用于后端分页的情况。通过 pagination.total 设置数据总数。

ID	User	Email	Register
1	Christopher Smith	christopher.smith@example.com	2026-04-03
2	Joshua White	joshua.white@example.com	2026-02-04
3	David Smith	david.smith@example.com	2026-05-07
4	Robert Garcia	robert.garcia@example.com	2026-07-30
5	Amanda Jackson	amanda.jackson@example.com	2026-04-01
6	Michael Jones	michael.jones@example.com	2025-12-18
7	Joshua Martin	joshua.martin@example.com	2026-09-04
8	Michael White	michael.white@example.com	2026-02-14
9	Stephanie White	stephanie.white@example.com	2026-03-20
10	John Harris	john.harris@example.com	2026-07-01

Total 1000

1

2

3

4

5

6

7

...

100

10 / Page

Go to

page: 1; pageSize: 10

隐藏源代码

单页时隐藏分页

设置 pagination.hideWhenSinglePage 设置单页时隐藏分页。

Name	Age	Email
Alice	25	alice@example.com
Bob	30	bob@example.com
Charlie	35	charlie@example.com

隐藏源代码

实例方法

需要注意的是，为了受控模式下的状态同步，选中、展开、筛选、排序等实例方法均采用异步设计，每次调用后可能需要等待一个微任务的时间才能生效。

expandedKeys: []

selectedKeys: []

sortOrder: {}

filterValue: {}

		ID	Name
		1001	Olivia Martinez
		1002	Daniel Harris
		1003	Benjamin Moore
		1004	Emma Wilson
		1005	William Davis
		1006	Alexander Harris
		1007	William Rodriguez
		1008	Liam Chen
		1009	Benjamin Moore
		1010	Sophia Harris

1

2

3

4

5

隐藏源代码

跨页全选

selection.selectAllMethod 可以异步地自定义全选时更新的 selectedKeys 值。

selection.supersetSelectAllRef 配置全选复选框选中状态所参考的超集：'current'（当前页数据，默认）、'all'（所有页的数据）。

Superset for Select All State Reference

All Data

	ID	User	Email	Register
	1	Sarah Wilson	sarah.wilson@example.com	2026-07-09
	2	Amanda Thompson	amanda.thompson@example.com	2026-07-17
	3	James Johnson	james.johnson@example.com	2025-12-08
	4	Emma Martin	emma.martin@example.com	2025-10-20
	5	Sarah Jones	sarah.jones@example.com	2026-03-31
	6	Joshua Taylor	joshua.taylor@example.com	2026-04-03
	7	Joshua Davis	joshua.davis@example.com	2026-03-23
	8	Robert Johnson	robert.johnson@example.com	2026-03-14
	9	Joshua White	joshua.white@example.com	2025-11-22
	10	Jennifer Harris	jennifer.harris@example.com	2025-10-01

Total 50

1

2

3

4

5

10 / Page

隐藏源代码

API

TableProps

属性	类型	可选	默认值	描述	版本
data	TableData[]	是	[]	表格的数据源。	0.1.0
columns	TableColumn[]	是	[]	表格的列配置集合。	0.1.0
bordered	boolean | TableBordered	是	true	是否显示表格边框及其相关样式。	0.1.0
variant	'normal' | 'striped' | 'checkered'	是	'normal'	表格的展示风格。	0.1.0
fixedHead	boolean	是	true	是否固定表头。	0.1.0
spanMethod	(options: TableOptionsArg) => void | { colspan?: number, rowspan?: number}	是		用于合并行或列的计算方法。	0.1.0
rowKey	string	是	'key'	用于标识行数据的唯一键名。	0.1.0
scroll	{ x?: number | string }	是		表格的滚动配置（如横向滚动设置）。	0.1.0
selection	boolean | TableSelection	是	false	是否启用行选择及其配置。	0.1.0
selectedKeys	any[] | null	是		当前选中的行键集合（受控）。	0.1.0
defaultSelectedKeys	any[] | null	是		默认选中的行键集合（非受控）。	0.1.0
expandable	boolean | TableExpandable	是	false	是否启用可展开行及其配置。	0.1.0
expandedKeys	any[] | null	是		当前展开的行键集合（受控）。	0.1.0
defaultExpandedKeys	any[] | null	是		默认展开的行键集合（非受控）。	0.1.0
summary	TableSummary	是		表格汇总行的配置项。	0.1.0
filterValue	FilterValue | null	是		当前的筛选值（受控）。	0.1.0
defaultFilterValue	FilterValue | null	是		默认的筛选值（非受控）。	0.1.0
sortOrder	SortOrder | null	是		当前的排序信息（受控）。	0.1.0
defaultSortOrder	SortOrder | null	是		默认的排序信息（非受控）。	0.1.0
loading	boolean	是	false	表格是否处于加载状态。	0.1.0
pagination	TablePagination	是	true	表格分页配置。	0.1.0
page	number | null	是		当前的页码（受控模式）。	0.1.0
defaultPage	number | null	是	1	当前的页码默认值（非受控模式）。	0.1.0
pageSize	number | null	是		当前的页面容量（受控模式）。	0.1.0
defaultPageSize	number | null	是	10	当前的页面容量默认值（非受控模式）。	0.1.0
tableAreaProps	RestAttrs	是		表格区域属性对象，作用的元素你可以通过 .px-table-area 找到。	0.1.0
borderRadius	number	是		表格的圆角设置。	0.1.0
pollSizeChange	boolean	是		开启轮询组件尺寸变化，可能会影响性能。该属也会作用域内部单选框、多选框、分页子组件。	0.1.0

TableEvents

事件	参数	描述	版本
update:selectedKey	value: any[]	更新 selectedKeys 的回调。	0.1.0
select	value: boolean, key: any, record: TableData, event: InputEvent	选择某一行的回调。	0.1.0
selectAll	value: boolean, event: InputEvent	全选的回调。	0.1.0
selectedChange	value: any[]	选择的行变化的回调。	0.1.0
update:expandedKeys	value: any[]	更新 expandedKeys 的回调。	0.1.0
expand	value: boolean, key: any, record: TableData, event: MouseEvent	展开某一行的回调。	0.1.0
expandedChange	value: any[]	展开的行变化的回调。	0.1.0
update:filterValue	value: FilterValue	更新 filterValue 的回调。	0.1.0
filterSelect	value: any[], key: string | number | symbol, option: TableFilterOption | string, column: TableColumn, event: InputEvent	选择筛选器中选项时的回调。	0.1.0
filterConfirm	key: string | number | symbol, event: MouseEvent	确认筛选器选择时的回调。	0.1.0
filterReset	key: string | number | symbol, event: MouseEvent	重置筛选器选择时的回调。	0.1.0
filterChange	value: FilterValue	筛选器选择改变时的回调。	0.1.0
update:sortOrder	value: SortOrder	更新 sortOrder 的回调。	0.1.0
sortSelect	value: 'asc' | 'desc' | 'none', key: string | number | symbol, column: TableColumn, event: MouseEvent	选择排序方向时的回调。	0.1.0
sortOrderChange	value: SortOrder	排序改变时的回调。	0.1.0
cellMouseenter	column: TableColumn, record: TableData, colIndex: number, rowIndex: number, event: MouseEvent	鼠标移入单元格的回调。	0.1.0
cellMouseleave	column: TableColumn, record: TableData, colIndex: number, rowIndex: number, event: MouseEvent	鼠标移出单元格的回调。	0.1.0
cellClick	column: TableColumn, record: TableData, colIndex: number, rowIndex: number, event: MouseEvent	点击数据区域单元格的回调。	0.1.0
cellDblclick	column: TableColumn, record: TableData, colIndex: number, rowIndex: number, event: MouseEvent	双击数据区域单元格的回调。	0.1.0
cellContextmenu	column: TableColumn, record: TableData, colIndex: number, rowIndex: number, event: MouseEvent	右键点击数据区域单元格的回调。	0.1.0
headCellClick	column: TableColumn, indexPath: number[], event: MouseEvent	点击表头单元格的回调。	0.1.0
headCellDblclick	column: TableColumn, indexPath: number[], event: MouseEvent	双击表头单元格的回调。	0.1.0
headCellContextmenu	column: TableColumn, indexPath: number[], event: MouseEvent	右键点击表头单元格的回调。	0.1.0
rowClick	record: TableData, rowIndex: number, event: MouseEvent	点击数据区域行的回调。	0.1.0
rowDblclick	record: TableData, rowIndex: number, event: MouseEvent	双击数据区域行的回调。	0.1.0
rowContextmenu	record: TableData, rowIndex: number, event: MouseEvent	右键点击数据区域行的回调。	0.1.0
update:page	value: number	更新 page 的回调。	0.1.0
update:pageSize	value: number	更新 pageSize 的回调。	0.1.0

TableSlots

插槽	参数	描述	版本
[columns[].labelSlotName]	rowIndex: number, colIndex: number, column: TableColumn	表格头部单元格自定义内容的插槽。	0.1.0
[columns[].slotName]	colIndex: number, rowIndex: number, column: TableColumn, record: TableData	表格单元格自定义内容的插槽。	0.1.0
expand	rowIndex: number, record: TableData	表格展开行内容的插槽。	0.1.0

TableExpose

属性	类型	可选	默认值	描述	版本
getCurrentData	() => TableData[]	否		获取表格经过排序和筛选的当前展示的数据。	0.1.0
getPaginatedData	() => TableData[]	否		获取表格分页后的当前展示的数据。	0.1.0
select	(key: any | any[], value: boolean) => Promise<void>	否		操作表格行选择状态。	0.1.0
selectAll	(value: boolean, crossPage?: boolean, ignoreDisabled?: boolean) => Promise<void>	否		全选 / 全不选表格行，crossPage 表示跨页选择，默认 false，ignoreDisabled 控制是否忽略 disabled 状态的行，默认 true。	0.1.0
clearSelect	() => Promise<void>	否		清除所有行的选择状态。	0.1.0
expand	(key: any | any[], value: boolean) => Promise<void>	否		操作表格行展开状态。	0.1.0
clearExpand	() => Promise<void>	否		清除所有行的展开状态。	0.1.0
filter	(key: number | string | symbol, value: any[]) => Promise<void>	否		操作列的筛选状态。	0.1.0
clearFilter	() => Promise<void>	否		清除所有列的筛选状态。	0.1.0
sort	(key: number | string | symbol, value: 'none' | 'asc' | 'desc') => Promise<void>	否		操作列的排序状态。	0.1.0
clearSort	() => Promise<void>	否		清除所有列的排序状态。	0.1.0

TableData

属性	类型	可选	默认值	描述	版本
expand	boolean | string | (( arg: Pick<TableOptionsArg, 'record' | 'rowIndex'>) => VNode | string | JSX.Element | null | void)	是		展开行内容配置。	0.1.0
disabled	boolean	是	false	是否禁用行选择。	0.1.0
[x: string | number | symbol]	any	是		其他属性。	0.1.0

TableColumn

属性	类型	可选	默认值	描述	版本
key	number | string | symbol	否		列的唯一标识。	0.1.0
label	string	是		表头显示文本。	0.1.0
field	string	是		单元格对应的数据字段名。	0.1.0
width	number	是	80	列宽设置。	0.1.0
minWidth	number	是	0	列的最小宽度设置。	0.1.0
align	'left' | 'center' | 'right'	是	'left'	单元格文本对齐方式。	0.1.0
fixed	'left' | 'right' | 'none'	是	'none'	列的固定位置设置。	0.1.0
slotName	string	是		单元格内容插槽名。	0.1.0
render	string | ((arg: TableOptionsArg) => VNode | string | JSX.Element | null | void)	是		单元格内容渲染函数或名称。	0.1.0
labelSlotName	string	是		表头单元格内容插槽名。	0.1.0
labelRender	string | ((arg: Omit<TableOptionsArg, 'record'>) => VNode | string | JSX.Element | null | void)	是		表头单元格内容渲染函数或名称。	0.1.0
children	TableColumn[]	是		子列集合，用于多级表头。	0.1.0
filterable	TableFilterable	是		列的筛选配置。	0.1.0
sortable	TableSortable	是		列的排序配置。	0.1.0
cellProps	RestAttrs	是		单元格属性对象。	0.1.0
labelCellProps	RestAttrs	是		表头单元格属性对象。	0.1.0
contentProps	RestAttrs	是		单元格内容属性对象。	0.1.0
labelContentProps	RestAttrs	是		表头内容属性对象。	0.1.0

TableBordered

属性	类型	可选	默认值	描述	版本
table	boolean	是	true	表格外围边框。	0.1.0
row	boolean	是	true	表格行水平边框。	0.1.0
col	boolean	是	true	表格列竖直边框。	0.1.0
head	boolean	是	true	表头区域和内容区域之间的边框。	0.1.0
side	boolean	是	true	表格左右两侧的边框，仅 bordered.table 或 bordered 为 true 时生效。	0.1.0

TableSelection

属性	类型	可选	默认值	描述	版本
multiple	boolean	是	false	是否为多选。	0.1.0
showSelectAll	boolean	是	true	是否为展示全选按钮，仅 selection.multiple 为 true 时生效。	0.1.0
selectAllMethod	(value: boolean, preState: { value: boolean, indeterminate: boolean }, arg: { originData: TableData[], currentData: TableData[], paginatedData: TableData[], page: number, pageSize: number }) => any[] | Promise<any[]>	是		自定义全选时更新的 selectedKeys 值。	0.1.0
supersetSelectAllRef	'current' | 'all'	是	'current'	配置全选复选框选中状态所参考的超集。	0.1.0
label	string	是		行选择器列的表头文本。	0.1.0
width	number	是	48	行选择器列宽度。	0.1.0
minWidth	number	是	0	行选择器列最小宽度。	0.1.0
fixed	boolean	是	false	行选择器列是否固定，存在左侧固定列时，强制左侧固定。	0.1.0
onlyCurrent	boolean	是	false	已选中行中，是否只包含当前 data 属性中的行。	0.1.0
cellProps	RestAttrs	是		列单元格属性对象。	0.1.0
labelCellProps	RestAttrs	是		列表头单元格属性对象。	0.1.0
contentProps	RestAttrs	是		列单元格内容属性对象。	0.1.0
labelContentProps	RestAttrs	是		列表头内容属性对象。	0.1.0

TableExpandable

属性	类型	可选	默认值	描述	版本
defaultExpandAllRows	boolean	是	false	是否默认展开所有行。	0.1.0
label	string	是		展开按钮列的表头文本。	0.1.0
width	number	是	48	展开按钮列宽度。	0.1.0
minWidth	number	是	0	展开按钮列最小宽度。	0.1.0
fixed	boolean	是	false	展开按钮列是否固定，存在左侧固定列时，强制左侧固定。	0.1.0
cellProps	RestAttrs	是		列单元格属性对象。	0.1.0
labelCellProps	RestAttrs	是		列表头单元格属性对象。	0.1.0
contentProps	RestAttrs	是		列单元格内容属性对象。	0.1.0
labelContentProps	RestAttrs	是		列表头内容属性对象。	0.1.0

TableSummary

属性	类型	可选	默认值	描述	版本
data	TableData | TableData[]	是		总结行数据。	0.1.0
placement	'end' | 'start'	是	'end'	总结行位置。	0.1.0
summaryText	string | string[]	是		总结行首列的文本，为数组时，作用于对应下标的总结行，为字符串值时作用于所有总结行。	0.1.0
fixed	boolean	是	true	总结行是否固定，当总结行位于数据区域头部时，总结行固定需要 fixedHead 为 true 才生效。	0.1.0
spanMethod	(options: TableOptionsArg) => void | { colspan?: number, rowspan?: number }	是		总结行合并单元格方法。	0.1.0

TableFilterable

属性	类型	可选	默认值	描述	版本
filterOptions	(string | TableFilterOption)[]	是		列的筛选选项。	0.1.0
filterMethod	(filteredValue: any[], record: TableData, field?: string) => boolean	是		用于判断记录是否匹配所选筛选项的函数。	0.1.0
defaultFilterValue	any[] | null	是		默认筛选值。	0.1.0
multiple	boolean	是	false	是否允许选择多选。	0.1.0
popoverProps	Omit<PopoverProps, 'visible' | 'content'> & EmitEvent<PopoverEvents>	是		筛选弹出框的属性。	0.1.0

TableSortable

属性	类型	可选	默认值	描述	版本
orders	('asc' | 'desc')[] | Readonly<('asc' | 'desc')[]>	是		列的可供选择的的排序方向。	0.1.0
sortMethod	'custom' | ((a: TableData, b: TableData, order: 'asc' | 'desc', field?: string) => number)	是		列的排序方法。	0.1.0
defaultSortOrder	'asc' | 'desc' | 'none' | null	是		列的排序方向的默认值。	0.1.0
multiple	boolean	是	false	是否为多级排序。	0.1.0
priority	number	是	0	多级排序的优先级，数值较大者优先。	0.1.0

TablePagination

paginateMethod 字段控制表格组件内部的分页方法，'auto' 时，表格会根据页面容量对数据进行分页。为 'custom' 则不会有此类行为，这个配置常用于后端分页。

export type TablePagination = {
	paginateMethod?: 'custom' | 'auto'
} & PaginationProps &
	EmitEvent<PaginationEvents> &
	RestAttrs

TableOptionsArg

export type TableOptionsArg = {
	rowIndex: number
	colIndex: number
	record: TableData
	column: TableColumn
}

Option

export interface Option<T = any> {
	value: T
	label: string
}

TableFilterOption

export interface TableFilterOption<T = any> extends Option<T> {
	disabled?: boolean
	key?: string | number | symbol
}

SortOrder, FilterValue

export type SortOrder = {
	[key: string | number | symbol]: 'asc' | 'desc' | 'none' | null | undefined
}

export type FilterValue = {
	[key: string | number | symbol]: any[] | null | undefined
}

RestAttrs

import type { StyleValue } from 'vue'

export type VueClassValue = string | Record<string, any> | VueClassValue[]
export type VueStyleValue = StyleValue

export type RestAttrs = {
	style?: VueStyleValue | null
	class?: VueClassValue | null
	[x: string]: any
}

EmitEvent

export type EmitEvent<T extends Record<string, any>> = {
	[K in keyof T as `on${Capitalize<K & string>}`]?: (...args: T[K]) => void
}