ProList - 高级列表

何时使用

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

代码演示

基本使用

编辑列表

带工具栏的列表

支持展开的列表

支持选中的列表

查询列表

带筛选和异步请求的列表

大小和分割线

竖排样式

一些预设的模式

翻页

卡片列表

API

ProList API

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

参数	说明	类型	默认值
dataSource	与 antd 相同的配置	`any[]`	`false`
actionRef	Table action 的引用，便于自定义触发	`MutableRefObject<ActionType>`	-
metas	列表项配置，类似 Table 中的 columns	`Metas`	-
rowKey	行的 key，一般是行 id	`string` \| `(row,index)=>string`	`'id'`
headerTitle	列表头部主标题	`React.ReactNode`	-
loading	是否加载中	`boolean` \| `(item: any) => boolean`	`false`
split	是否有分割线	`boolean`	`false`
rowSelection	与 antd 相同的配置	`object` \|`boolean`	false
expandable	与 antd 相同的配置	`object` \| `false`	-
showActions	何时展示 actions	`'hover'` \| `'always'`	`'always'`
showExtra	何时展示 extra	`'hover'` \| `'always'`	`'always'`
onRow	与 antd 相同的配置，用户传入`grid`属性时，列表将会以卡片模式进行渲染，此事件将不会触发，请使用`onItem`	`function(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'`