ProList - 高级列表

何时使用

基于 ProTable 实现,可以认为是 ProTable 的一个特例,在完成一个标准的列表时即可使用。

代码演示

基本使用

编辑列表

支持展开的列表

支持选中的列表

查询列表

带筛选和异步请求的列表

大小和分割线

竖排样式

一些预设的模式

翻页

卡片列表

API

ProList API

ProList 与 antd 的 List 相比,API 设计上更像 Table,使得可以通过配置化的方式快速定义数据项的展现形式。也使得 Table 和 List 的切换变得更加容易。另外 ProList 基于 ProTable 实现,除了 Table 相关的 API 以外 ProList 支持大部分 ProTable 的 API。

参数说明类型默认值
dataSource与 antd 相同的配置any[]false
metas列表项配置,类似 Table 中的 columnsMetas-
rowKey行的 key,一般是行 idstring | (row,index)=>string'id'
headerTitle列表头部主标题React.ReactNode-
loading是否加载中boolean | (item: any) => booleanfalse
split是否有分割线booleanfalse
rowSelection与 antd 相同的配置object |booleanfalse
expandable与 antd 相同的配置object | false-
showActions何时展示 actions'hover' | 'always''always'
showExtra何时展示 extra'hover' | 'always''always'
onRow与 antd 相同的配置function(record, index)-
rowClassName自定义列表行的类名string| (row, index) => string-
itemHeaderRender自定义每一列的 header,与 itemRender 不同的时,它会保留多选和展开收起--

批量操作

与 ProTable 相同的配置

Metas.[Meta] 通用 API

参数说明类型默认值
dataIndex数据在数据项中对应的路径,支持通过数组查询嵌套路径string | string[]-
valueType值的类型,和 ProTable 一致'text' | 'date' ...'text'
render自定义渲染函数(text: React.ReactNode,record: T,index: number) => React.ReactNode | React.ReactNode[]-

Metas.type

对应 dataSource 的字段类型为 'new' | 'top' | 'inline'

参数说明类型默认值
dataIndex--'type'

Metas.title

参数说明类型默认值
dataIndex--'title'

Metas.subTitle

参数说明类型默认值
dataIndex--'subTitle'

Metas.description

参数说明类型默认值
dataIndex--'description'

Metas.avatar

参数说明类型默认值
dataIndex--'avatar'

Metas.actions

参数说明类型默认值
dataIndex--'actions'

Metas.content

参数说明类型默认值
dataIndex--'content'

Metas.extra

参数说明类型默认值
dataIndex--'extra'