ProList - 高级列表

何时使用

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

代码演示

基本使用

基础列表

编辑列表

基础列表
  • 语雀的天空
    Ant Design
    TechUI

    我是一条测试的描述
  • Ant Design
    Ant Design
    TechUI

    我是一条测试的描述
  • 蚂蚁金服体验科技
    Ant Design
    TechUI

    我是一条测试的描述
  • TechUI
    Ant Design
    TechUI

    我是一条测试的描述

带工具栏的列表

全部实验室99
我创建的实验室32
  • 实验名称1

    系统性的沉淀B端知识体系
    模型数
    2903
    指标数
    3720
    实验状态
    成功
  • 实验名称2

    系统性的沉淀B端知识体系
    模型数
    2904
    指标数
    3721
    实验状态
    成功
  • 实验名称3

    系统性的沉淀B端知识体系
    模型数
    2905
    指标数
    3722
    实验状态
    成功

支持展开的列表

支持展开的列表

支持选中的列表

支持选中的列表
  • 语雀的天空

    Ant Design, a design language for background applications, is refined by Ant UED Team
    发布中
    80%
  • Ant Design

    Ant Design, a design language for background applications, is refined by Ant UED Team
    发布中
    80%
  • 蚂蚁金服体验科技

    Ant Design, a design language for background applications, is refined by Ant UED Team
    发布中
    80%
  • TechUI

    Ant Design, a design language for background applications, is refined by Ant UED Team
    发布中
    80%

查询列表

带筛选和异步请求的列表

基础列表
  • 第 0-0 条/总共 0 条
  • 1

大小和分割线

大小:
default
分割线:
有


大小和分割线

竖排样式

竖排样式
  • 语雀的天空

    语雀专栏设计语言蚂蚁金服
    段落示意:蚂蚁金服设计平台 design.alipay.com,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 design.alipay.com,用最小的工作量,无缝接入蚂蚁金服生态提供跨越设计与开发的体验解决方案。
    • 156
      156
      2
    logo
  • Ant Design

    语雀专栏设计语言蚂蚁金服
    段落示意:蚂蚁金服设计平台 design.alipay.com,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 design.alipay.com,用最小的工作量,无缝接入蚂蚁金服生态提供跨越设计与开发的体验解决方案。
    • 156
      156
      2
    logo
  • 蚂蚁金服体验科技

    语雀专栏设计语言蚂蚁金服
    段落示意:蚂蚁金服设计平台 design.alipay.com,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 design.alipay.com,用最小的工作量,无缝接入蚂蚁金服生态提供跨越设计与开发的体验解决方案。
    • 156
      156
      2
    logo
  • TechUI

    语雀专栏设计语言蚂蚁金服
    段落示意:蚂蚁金服设计平台 design.alipay.com,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 design.alipay.com,用最小的工作量,无缝接入蚂蚁金服生态提供跨越设计与开发的体验解决方案。
    • 156
      156
      2
    logo

一些预设的模式

预设的列状态

翻页

翻页
  • 第 1-5 条/总共 7 条
  • 1
  • 2
  • 5 条/页

卡片列表

卡片列表展示
语雀的天空
语雀专栏
发布中
80%
Ant Design
语雀专栏
发布中
80%
蚂蚁金服体验科技
语雀专栏
发布中
80%
TechUI
语雀专栏
发布中
80%
TechUI 2.0
语雀专栏
发布中
80%
Bigfish
语雀专栏
发布中
80%
Umi
语雀专栏
发布中
80%
Ant Design Pro
语雀专栏
发布中
80%
  • 第 1-8 条/总共 8 条
  • 1

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'