Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

基础用法

最简单的表格用法。

ID	Name	Age	Email
1	Alice	24	alice@example.com
2	Bob	28	bob@example.com
3	Charlie	32	charlie@example.com
4	David	21	david@example.com

Example

多选

添加 row-selection 属性以开启多选功能。

Selected Keys: []

	ID	Name	Status
	1	Alice	Active
	2	Bob	Inactive

Example

排序

在列配置中设置 sortable: true 即可开启排序功能。

Current Sort: None

ID	Name	Age	Score
1	Alice	24	85
2	Bob	28	92
3	Charlie	21	78
4	David	32	95
5	Eve	24	88

Example

高阶用法

包含分页、排序、加载状态、斑马纹、带边框、以及自定义列渲染的综合用例。

ID	Name	Age	Status	Action
1	User 1	20	Active
2	User 2	21	Inactive
3	User 3	22	Active
4	User 4	23	Inactive
5	User 5	24	Active

Total 15 items

Example

API

Table Props

属性名	说明	类型	默认值
data	显示的数据	any[]	[]
columns	表格列的配置描述	BrTableColumn[]	[]
rowKey	表格行 key 的取值，可以是字符串或一个函数	string | ((row: any) => string | number)	'id'
stripe	是否为斑马纹 table	boolean	false
border	是否带有纵向边框	boolean	false
hover	是否开启 hover 高亮	boolean	true
loading	是否显示加载状态	boolean	false
loadingText	加载状态的文本提示	string	'Loading...'
emptyText	空数据时的文本提示	string	'No Data'
rowSelection	是否显示多选列	boolean	false
maxHeight	table 的最大高度	string | number	-
stickyHeader	是否固定表头	boolean	false
pagination	分页配置，设为 false 隐藏	BrTablePagination | false	false

Table Events

事件名	说明	回调参数
update:selection	多选状态发生变化时触发	(selectedRowKeys: (string|number)[], selectedRows: any[])
update:pagination	分页状态发生变化时触发	(pagination: BrTablePagination)
sort	排序发生变化时触发	(sort: BrTableSort)
row-click	当某一行被点击时触发	(row: any, index: number, event: MouseEvent)

Table Slots

插槽名	说明	参数
cell-[key]	自定义列的内容渲染	{ row, column, index }

Column 配置 (BrTableColumn)

属性名	说明	类型	默认值
key	列的唯一标识	string	-
title	列标题	string	-
width	对应列的宽度	string | number	-
minWidth	对应列的最小宽度	string | number	-
maxWidth	对应列的最大宽度	string | number	-
align	对齐方式	'left' | 'center' | 'right'	'left'
fixed	列是否固定在左侧或者右侧	'left' | 'right' | boolean	-
sortable	对应列是否可以排序，custom 为自定义排序	boolean | 'custom'	false
render	自定义渲染函数	(row: any, index: number) => any	-