ProComponentsProComponents
首页
文档
组件
Changelog
Playground
⌘ K

相关资源

Ant Design
Ant Design Pro
Ant Design Pro Components
Umi-React 应用开发框架
Dumi-组件/文档研发工具
qiankun-微前端框架

社区

Medium
Twitter
yuqueAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconfSEE Conf-SEE Conf-蚂蚁体验科技大会

帮助

GitHub
更新日志
讨论

more products更多产品

yuque语雀-知识创作与分享工具
AntVAntV-数据可视化解决方案
EggEgg-企业级 Node.js 框架
kitchenKitchen-Sketch 工具集
xtech蚂蚁体验科技
Copyright © 2022-2023
Copyright © 2023 | Powered by dumi

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'