- 何时使用
- 代码演示
- 基本使用
- 编辑列表
- 带工具栏的列表
- 支持展开的列表
- 支持选中的列表
- 查询列表
- 带筛选和异步请求的列表
- 大小和分割线
- 竖排样式
- 一些预设的模式
- 翻页
- 卡片列表
- API
- ProList API
- 批量操作
- Metas.[Meta] 通用 API
- Metas.type
- Metas.title
- Metas.subTitle
- Metas.description
- Metas.avatar
- Metas.actions
- Metas.content
- Metas.extra
ProList - 高级列表
何时使用
基于 ProTable 实现，可以认为是 ProTable 的一个特例，在完成一个标准的列表时即可使用。
代码演示
基本使用
编辑列表
带工具栏的列表
支持展开的列表
支持选中的列表
查询列表
带筛选和异步请求的列表
大小和分割线
竖排样式
- 段落示意：蚂蚁金服设计平台 design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态提供跨越设计与开发的体验解决方案。
- 1561562
- 段落示意：蚂蚁金服设计平台 design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态提供跨越设计与开发的体验解决方案。
- 1561562
- 段落示意：蚂蚁金服设计平台 design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态提供跨越设计与开发的体验解决方案。
- 1561562
- 段落示意：蚂蚁金服设计平台 design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态提供跨越设计与开发的体验解决方案。
- 1561562
一些预设的模式
翻页
卡片列表
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' |