eo-next-table

<eo-next-table>

大型表格

Examples

Basic

Playground

Fixed & Scroll & useBrick

Playground

Front Search

Playground

Row Selection

Playground

Expandable

Playground

Draggable

Playground

RowSpan & ColSpan

Playground

Tree

设置 childrenColumnName 来指定树形结构的列名，展开功能的配置可以使用 expandable。目前树形结构暂不支持拖拽。

Playground

With Row Selection

设置 rowSelection.checkStrictly 来控制父子数据选中状态是否关联。注意，关联的时候，节点勾选传导策略为【只勾选可触达的可勾选节点】

Playground

With Front Search

Playground

Dynamic Columns

Playground

Properties

Name	Description	Type	Default	Required
rowKey	指定表格行的 key	string	"key"
columns	列定义	Column[]
cell	单元格	CellConfig
dataSource	数据源	DataSource
frontSearch	是否前端搜索	boolean
pagination	分页配置	PaginationType
loading	显示加载中状态	boolean
multiSort	是否支持多列排序，前端搜索时需设置 column.sortPriority 优先级	boolean
sort	排序信息	Sort | Sort[]
rowSelection	表格行可选择配置	RowSelectionType
selectedRowKeys	选中项的 key	(string | number)[]
hiddenColumns	隐藏的列（输入对应的 column.key）	(string | number)[]
expandable	表格行展开配置	ExpandableType
expandedRowKeys	展开项的 key	(string | number)[]
childrenColumnName	树形结构的列名	string	"children"
rowDraggable	表格行拖拽配置	boolean
searchFields	进行前端搜索的字段，支持嵌套的写法。不配置的时候默认为对所有 column.dataIndex 进行前端搜索	(string | string[])[]
size	表格大小	TableProps<RecordType>["size"]	"large"
showHeader	是否显示表头	boolean	true
scrollConfig	滚动配置	TableProps<RecordType>["scroll"]	{ x: true }
optimizedColumns	优化渲染的列（输入对应的 column.key）	(string | number)[]

Events

Name	Description	Event Detail
page.change	page 或 pageSize 改变的回调	{ page: number; pageSize: number } - 改变后的页码及每页条数
page.size.change	pageSize 变化的回调	{ page: number; pageSize: number } - 改变后的页码及每页条数
sort.change	排序变化的回调	Sort | Sort[] | undefined - 当前排序的信息
row.select	行选中项发生变化时的回调	{ keys: (string | number)[]; rows: RecordType[]; info: { type: RowSelectMethod } } - 改变后的 rowKey 及行数据
row.expand	点击展开图标时触发	{ expanded: boolean; record: RecordType } - 当前行的展开情况及数据
expanded.rows.change	展开的行变化时触发	(string | number)[] - 所有展开行的 key
row.drag	表格行拖拽结束发生的事件	{ list: RecordType[]; active: RecordType; over: RecordType } - 重新排序的行数据、拖拽的行数据、放下位置的行数据

Methods

Name	Description	Params	Returns
search	前端搜索	params: { q: string }

Type references

Column

extends Pick<ColumnType<RecordType>, "align" | "colSpan" | "dataIndex" | "ellipsis" | "fixed" | "rowScope" | "showSorterTooltip" | "sortDirections" | "title" | "width">

Name	Type	Required	Description
key	string | number
headerBrick	WithUseBrick		表头自定义展示构件
useBrick	UseBrickConf		内容自定义展示构件
cellColSpanKey	string		记录表格列合并的值的 key
cellRowSpanKey	string		记录表格行合并的值的 key
sortable	boolean		是否可排序
sortPriority	number		前端搜索时，多列排序优先级，数字越大优先级越高
verticalAlign	CSSProperties["verticalAlign"]		垂直对齐方式
cellStyle	CSSProperties		单元格样式
headerStyle	CSSProperties		头部单元格样式

WithUseBrick

Name	Type	Required	Description
useBrick	UseBrickConf

CellConfig

extends WithUseBrick

Name	Type	Required	Description
header	WithUseBrick

DataSource

Name	Type	Required	Description
list	RecordType[]
total	number
page	number
pageSize	number

PaginationConfig

extends Pick<TablePaginationConfig, "disabled" | "hideOnSinglePage" | "pageSizeOptions" | "responsive" | "showLessItems" | "showQuickJumper" | "showSizeChanger" | "showTitle" | "simple" | "size">

Name	Type	Required	Description
showTotal	boolean

Sort

Name	Type	Required	Description
columnKey	string | number
order	SortOrder

RowSelectionConfig

extends Pick<TableRowSelection<RecordType>, "columnWidth" | "fixed" | "hideSelectAll" | "preserveSelectedRowKeys" | "type" | "checkStrictly">

Name	Type	Required	Description
showSelectInfo	boolean
rowDisabled	string | boolean

ExpandableConfig

extends Pick<TableExpandableConfig<RecordType>, "columnWidth" | "expandRowByClick" | "defaultExpandAllRows" | "fixed" | "showExpandColumn">

Name	Type	Required	Description
expandIconBrick	{ useBrick: UseBrickConf }
expandedRowBrick	{ useBrick: UseBrickConf }
rowExpandable	string | boolean

RecordType

Record<string, any>

PaginationType

false | PaginationConfig | undefined

RowSelectionType

boolean | RowSelectionConfig | undefined

ExpandableType

boolean | ExpandableConfig | undefined