ProList - 高级列表

何时使用

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

代码演示

基本使用

编辑列表

带工具栏的列表

支持展开的列表

支持选中的列表

查询列表

带筛选和异步请求的列表

大小和分割线

竖排样式

一些预设的模式

翻页

卡片列表

API

ProList API

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

参数说明类型默认值
dataSource与 antd 相同的配置any[]false
actionRefTable action 的引用,便于自定义触发MutableRefObject<ActionType>-
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 相同的配置,用户传入grid属性时,列表将会以卡片模式进行渲染,此事件将不会触发,请使用onItemfunction(record, index)-
onItem与 antd 相同的配置,在所有类型点击某个项目都会触发该事件。function(record, index)-
rowClassName自定义列表行的类名string| (row, index) => string-
itemHeaderRender自定义每一列的 header,与 itemRender 不同的时,它会保留多选和展开收起--
itemCardProps自定义卡片列表的 proCard props,只在卡片列表下生效--

批量操作

与 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'
cardActionProps设置卡片列表把 action 渲染到哪里|extra'actions' | 'extra'

Metas.content

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

Metas.extra

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