ProDescriptions - 高级定义列表

何时使用

高级描述列表组件,提供一个更加方便快速的方案来构建描述列表。

ProDescriptions 的诞生是为了解决项目中需要写很多 Descriptions 的样板代码的问题,所以在其中做了封装了很多常用的逻辑。在 React 中写一个 Descriptions 免不了需要定义一些雷同的属性。所以 ProDescriptions 默认封装了请求网络,columns 列展示的逻辑。

比如 ProDescriptions 封装了请求网络的行为,ProDescriptions 会将 props.params 中的数据默认带入到请求中,如果接口恰好与我们的定义相同,实现一个查询会非常简单。

import request from 'umi-request';
const fetchData = (params) =>
request<{
data: T{};
}>('https://proapi.azurewebsites.net/github/issues', {
params,
});
const keyWords = "Ant Design"
<ProDescriptions<T,U> request={fetchData} />;

我们约定 request 拥有一个参数, params 会自带 props 中的 params 。类型如下:

(params: U) => RequestData;

对与请求回来的结果的 ProDescriptions 也有一些约定,类型如下:

interface RequestData {
data: Datum{};
success: boolean;
}

代码演示

基础定义列表

基本使用

高级定义列表
文本这是一段很长很长超级超级长的无意义说明文本并且重复了很多没有意义的词语,就是为了让它变得很长很长超级超级长
金额
¥100.00
百分比100.00%
选择框未解决
远程选择框closed
进度条
40%
日期时间2022-11-25 17:02:11
日期2022-11-25
日期区间
2022-11-24 17:02:11
2022-11-25 17:02:11
时间17:02:11
代码块

yarn run v1.22.0
$ eslint --format=pretty ./packages
Done in 9.70s.
          
JSON 代码块
{
  "compilerOptions": {
    "target": "esnext",
    "moduleResolution": "node",
    "jsx": "preserve",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "suppressImplicitAnyIndexErrors": true,
    "declaration": true,
    "skipLibCheck": true
  },
  "include": [
    "**/src",
    "**/docs",
    "scripts",
    "**/demo",
    ".eslintrc.js"
  ]
}

数组类型 dataIndex

格式化配置

根据配置格式化日期

高级定义列表
日期2022.11.25
日期区间
2022.11.24 17:02:11
2022.11.25 17:02:11
时间2022.11.25
时间日期2022.11.25 17:02:SS
更新时间a month ago

远程请求数据

通过请求接口数据来展示定义列表

columns 配置

通过请求接口数据和 columns 来展示定义列表

dataSource 配置数据

ProDescriptions 支持了和 Table 相同的 dataSource

dataSource and columns
文本这是一段文本columns
状态全部
状态2open
时间2020-08-09
money¥1,212,100.00
百分比100.00%

可编辑的定义列表

API 与 ProTable 相同

API

ProDescriptions

更多功能查看 antd 的 Descriptions

参数说明类型默认值
title描述列表的标题,显示在最顶部ReactNode-
tooltip内容的补充描述,hover 后显示string-
ellipsis是否自动缩略boolean-
copyable是否支持复制boolean-
loading展示一个加载的骨架屏,骨架屏和 dom 不会一一对应boolean-
extra描述列表的操作区域,显示在右上方string | ReactNode-
bordered是否展示边框booleanfalse
column一行的 ProDescriptionsItems 数量,可以写成像素值或支持响应式的对象写法 { xs: 1, sm: 2, md: 3}number3
size设置列表的大小。可以设置为 middlesmall, 或不填(只有设置 bordered={true} 生效)default | middle | small-
layout描述布局horizontal | verticalhorizontal
colon配置 ProDescriptions.Itemcolon 的默认值booleantrue
request请求数据,不设置 columns 时 ProDescriptions.Item 需设置对应的 dataIndex--
onRequestError处理 request 的错误,默认会直接抛出错误--
columns列定义,与 request 配合使用 columns--
editable编辑的相关配置EditableConfig-

editable 编辑配置

属性描述类型默认值
form可编辑表格的 form 实例,使用 Form.useForm 生成后使用FormInstance-
formProps可以配置 form 的属性,但是不支持 onFinishFormProps-
editableKeys正在编辑的行,受控属性。 默认 key 会使用 rowKey 的配置,如果没有配置会使用 index,建议使用 rowKeyKey[]-
onChange行数据被修改的时候触发(editableKeys: Key[], editableRows: T[]) => void-
onSave保存一行的时候触发(key: Key, row: T,originRow:T,newLine?:newLineConfig) => Promise<any>-
saveText保存一行的文字React.ReactNode保存
onDelete删除一行的时候触发(key: Key, row: T) => Promise<any>-
deleteText删除一行的文字React.ReactNode删除
onCancel取消编辑一行时触发(key: Key, row: T,originRow:T,newLine?:newLineConfig) => Promise<any>-
cancelText取消编辑一行的文字React.ReactNode取消
actionRender自定义编辑模式的操作栏(row: T, config: ActionRenderConfig<T>,defaultDom) => ReactNode[]-
deletePopconfirmMessage删除时弹出的确认框提示消息ReactNode删除此行?
onlyOneLineEditorAlertMessage只能编辑一行的的提示ReactNode只能同时编辑一行
onlyAddOneLineAlertMessage只能同时新增一行的提示ReactNode只能新增一行

ProDescriptions.Item

参数说明类型默认值
label内容的描述ReactNode-
tooltip内容的补充描述,hover 后显示string-
span包含列的数量number1
valueType格式化的类型ValueType-
valueEnum当前列值的枚举 valueEnumRecord-
request从网络请求枚举数据()=>Promise<{[key:string|number]:any}>-
dataIndex返回数据的 key 与 ProDescriptions 的 request 配合使用,用于配置式的定义列表React.Text | React.Text[]-
editable在编辑表格中是否可编辑的,函数的参数和 table 的 render 一样false | (text: any, record: T,index: number) => booleantrue

span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。

ActionRef

在进行了操作,或者 tab 切换等时候我们需要手动触发一下描述列表的更新,纯粹的 props 很难解决这个问题,所以我们提供一个 ref 来支持一些默认的操作。

const ref = useRef<ActionType>();
// 两秒刷新一次
useEffect(() => {
setInterval(() => {
ref.current.reload();
}, 2000);
}, []);
// hooks 绑定
<ProDescriptions actionRef={ref} />;
// class
<ProDescriptions actionRef={(ref) => (this.ref = ref)} />;

ActionRef 还支持了一些别的行为,某些时候会减少的你的编码成本,但是 ref 会脱离 react 的生命周期,所以这些 action 都是不受控的。

// 刷新
ref.current.reload();