ProDescriptions - Advanced Definition List

When to use

The advanced description list component provides a more convenient and faster solution to build a description list.

ProDescriptions was born to solve the problem of writing a lot of boilerplate code of Descriptions in the project, so many common logics are encapsulated in it. Writing a Descriptions in React will inevitably need to define some similar properties. So ProDescriptions encapsulates the request network by default, and the logic shown in the columns column.

For example, ProDescriptions encapsulates the behavior of the request network, and ProDescriptions will bring the data in props.params into the request by default. If the interface happens to be the same as our definition, it will be very simple to implement a query.

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} />;

We agree that request has a parameter, and params will carry the params in props. The types are as follows:

(params: U) => RequestData;

There are also some conventions on the ProDescriptions of the results returned by the request, the types are as follows:

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

Code Demo

Basic definition list

Basic usage

订单详情

订单备注客户要求在一季度内完成全部部署上线工作，优先安排专属技术支持团队跟进对接，确保各环节顺利推进客户要求在一季度内完成全部部署上线工作，优先安排专属技术支持团队跟进对接，确保各环节顺利推进
合同金额 ¥128,000.00	完成进度75.00%
订单状态处理中	付款方式bank
交付进度 75%	下单时间2024-01-15 00:00:00
签约日期2024-01-15	服务周期 2024-01-15 00:00:00 ~ 2025-01-14 00:00:00
创建时间00:00:00	部署脚本 `pnpm install pnpm run build pnpm run deploy --env production`
服务配置 `{ "service": { "name": "user-auth-service", "port": 8080, "replicas": 3, "healthCheck": "/api/health", "env": "production", "resources": { "cpu": "500m", "memory": "512Mi" } } }`

Basic definition list

import { ProDescriptions } from '@ant-design/pro-components';
import { Button } from 'antd';

import { FIXED_BASE_DATE } from '../mockData';

const Demo = () => {
  return (
    <ProDescriptions
      column={2}
      title="订单详情"
      tooltip="展示订单的详细信息，包括金额、状态、日期等多种值类型"
      columns={[
        {
          valueType: 'option',
          render: () => [
            <Button key="primary" type="primary">
              提交审核
            </Button>,
          ],
        },
        {
          span: 2,
          valueType: 'text',
          renderText: (_) => {
            return _ + _;
          },
          ellipsis: true,
          label: '订单备注',
          children:
            '客户要求在一季度内完成全部部署上线工作，优先安排专属技术支持团队跟进对接，确保各环节顺利推进',
        },
        {
          label: '合同金额',
          tooltip: '仅供参考，以实际签约合同为准',
          valueType: 'money',
          children: 128000,
        },
        {
          label: '完成进度',
          valueType: 'percent',
          children: 75,
        },
        {
          label: '订单状态',
          valueEnum: {
            all: { text: '全部', status: 'Default' },
            pending: {
              text: '待审核',
              status: 'Warning',
            },
            processing: {
              text: '处理中',
              status: 'Processing',
            },
            completed: {
              text: '已完成',
              status: 'Success',
            },
            rejected: {
              text: '已驳回',
              status: 'Error',
            },
          },
          children: 'processing',
        },
        {
          label: '付款方式',
          request: async () => [
            { label: '对公转账', value: 'bank' },
            { label: '支付宝', value: 'alipay' },
            { label: '微信支付', value: 'wechat' },
            { label: '信用卡', value: 'credit' },
          ],
          children: 'bank',
        },
        {
          label: '交付进度',
          valueType: 'progress',
          children: 75,
        },
        {
          label: '下单时间',
          valueType: 'dateTime',
          children: FIXED_BASE_DATE.valueOf(),
        },
        {
          label: '签约日期',
          valueType: 'date',
          children: FIXED_BASE_DATE.valueOf(),
        },
        {
          label: '服务周期',
          valueType: 'dateTimeRange',
          children: [
            FIXED_BASE_DATE.valueOf(),
            FIXED_BASE_DATE.add(365, 'd').valueOf(),
          ],
        },
        {
          label: '创建时间',
          valueType: 'time',
          children: FIXED_BASE_DATE.valueOf(),
        },
        {
          label: '部署脚本',
          valueType: 'code',
          children: `
pnpm install
pnpm run build
pnpm run deploy --env production
        `,
        },
        {
          label: '服务配置',
          valueType: 'jsonCode',
          children: `{
  "service": {
    "name": "user-auth-service",
    "port": 8080,
    "replicas": 3,
    "healthCheck": "/api/health",
    "env": "production",
    "resources": {
      "cpu": "500m",
      "memory": "512Mi"
    }
  }
}`,
        },
      ]}
    />
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

Array type dataIndex

import type { ProDescriptionsActionType } from '@ant-design/pro-components';
import { ProDescriptions } from '@ant-design/pro-components';
import { Button } from 'antd';
import { useRef } from 'react';

const Demo = () => {
  const actionRef = useRef<ProDescriptionsActionType>();
  return (
    <ProDescriptions
      actionRef={actionRef}
      title="高级定义列表 request"
      request={async () => {
        return Promise.resolve({
          success: true,
          data: {
            info: {
              id: '这是一段文本',
              date: '20200730',
              money: '12121',
            },
          },
        });
      }}
      editable={{
        onSave: async (_keypath, _newInfo, _oriInfo) => {
          return true;
        },
      }}
      columns={[
        {
          formItemProps: {
            rules: [
              {
                required: true,
                message: '此项为必填项',
              },
            ],
          },
          dataIndex: ['info', 'id'],
        },
        {
          dataIndex: ['info', 'date'],
          label: '日期',
          valueType: 'date',
        },
        {
          label: 'money',
          dataIndex: ['info', 'money'],
          valueType: 'money',
        },
        {
          label: '文本',
          valueType: 'option',
          render: () => [
            <Button
              type="primary"
              onClick={() => {
                actionRef.current?.reload();
              }}
              key="reload"
            >
              刷新
            </Button>,
            <Button key="rest">重置</Button>,
          ],
        },
      ]}
    />
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

Format configuration

Format the date according to format

高级定义列表

日期2024.01.15	日期区间 2024.01.14 00:00:00 ~ 2024.01.15 00:00:00
时间2024.01.15	时间日期2024.01.15 00:00:00
更新时间3 years ago

ProDescriptions 格式化配置 Props 说明：

column: 列数，设置为 2 表示每行显示 2 列
title: 描述列表标题
tooltip: 标题提示信息

列配置（columns）常用项：

label: 标签文本
valueType: 值类型，决定如何渲染数据
fieldProps: 字段属性配置
children: 数据内容（无 dataIndex 时作为展示值）

FieldProps 格式化配置：

format: 格式化字符串，定义显示格式
自定义格式: 支持 dayjs 的所有格式化选项

ValueType 日期时间类型：

date: 日期格式，显示年月日
dateTime: 日期时间格式，显示年月日时分秒
dateTimeRange: 日期时间区间格式
time: 时间格式，显示时分秒
fromNow: 相对时间格式，显示多久之前

格式化字符串说明：

YYYY: 四位年份
MM: 两位月份
DD: 两位日期
HH: 24小时制小时
mm: 分钟
ss: 秒

数据格式：

时间戳: 使用 dayjs().valueOf() 获取时间戳
数组格式: 日期区间使用数组 [start, end]
相对时间: fromNow 类型支持相对时间计算

Dayjs 操作：

add: 添加时间，如 add(-1, 'month') 表示一个月前
valueOf: 获取时间戳
格式化: 通过 format 方法格式化时间

使用场景：

日期展示: 展示各种格式的日期时间
时间区间: 展示时间范围
相对时间: 展示相对时间，如"一个月前"
格式化定制: 根据需求定制显示格式

最佳实践：

格式统一: 在项目中保持日期格式的一致性
用户友好: 选择用户容易理解的格式
国际化: 考虑不同地区的日期格式习惯
性能考虑: 避免频繁的时间格式化操作

import { ProDescriptions } from '@ant-design/pro-components';

import { FIXED_BASE_DATE } from '../mockData';

const Demo = () => {
  return (
    <>
      <ProDescriptions
        column={2}
        title="高级定义列表"
        tooltip="包含了从服务器请求，columns等功能"
        columns={[
          {
            label: '日期',
            fieldProps: {
              format: 'YYYY.MM.DD',
            },
            valueType: 'date',
            children: FIXED_BASE_DATE.valueOf(),
          },
          {
            label: '日期区间',
            fieldProps: {
              format: 'YYYY.MM.DD HH:mm:ss',
            },
            valueType: 'dateTimeRange',
            children: [
              FIXED_BASE_DATE.add(-1, 'd').valueOf(),
              FIXED_BASE_DATE.valueOf(),
            ],
          },
          {
            label: '时间',
            fieldProps: {
              format: 'YYYY.MM.DD',
            },
            valueType: 'time',
            children: FIXED_BASE_DATE.valueOf(),
          },
          {
            label: '时间日期',
            fieldProps: {
              format: 'YYYY.MM.DD HH:mm:ss',
            },
            valueType: 'dateTime',
            children: FIXED_BASE_DATE.valueOf(),
          },
          {
            label: '更新时间',
            fieldProps: {
              format: 'YYYY.MM.DD',
            },
            valueType: 'fromNow',
            children: FIXED_BASE_DATE.add(-1, 'month').valueOf(),
          },
        ]}
      />

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>ProDescriptions 格式化配置 Props 说明：</h4>
        <ul>
          <li>
            <strong>column</strong>: 列数，设置为 2 表示每行显示 2 列
          </li>
          <li>
            <strong>title</strong>: 描述列表标题
          </li>
          <li>
            <strong>tooltip</strong>: 标题提示信息
          </li>
        </ul>
        <h4>列配置（columns）常用项：</h4>
        <ul>
          <li>
            <strong>label</strong>: 标签文本
          </li>
          <li>
            <strong>valueType</strong>: 值类型，决定如何渲染数据
          </li>
          <li>
            <strong>fieldProps</strong>: 字段属性配置
          </li>
          <li>
            <strong>children</strong>: 数据内容（无 dataIndex 时作为展示值）
          </li>
        </ul>
        <h4>FieldProps 格式化配置：</h4>
        <ul>
          <li>
            <strong>format</strong>: 格式化字符串，定义显示格式
          </li>
          <li>
            <strong>自定义格式</strong>: 支持 dayjs 的所有格式化选项
          </li>
        </ul>
        <h4>ValueType 日期时间类型：</h4>
        <ul>
          <li>
            <strong>date</strong>: 日期格式，显示年月日
          </li>
          <li>
            <strong>dateTime</strong>: 日期时间格式，显示年月日时分秒
          </li>
          <li>
            <strong>dateTimeRange</strong>: 日期时间区间格式
          </li>
          <li>
            <strong>time</strong>: 时间格式，显示时分秒
          </li>
          <li>
            <strong>fromNow</strong>: 相对时间格式，显示多久之前
          </li>
        </ul>
        <h4>格式化字符串说明：</h4>
        <ul>
          <li>
            <strong>YYYY</strong>: 四位年份
          </li>
          <li>
            <strong>MM</strong>: 两位月份
          </li>
          <li>
            <strong>DD</strong>: 两位日期
          </li>
          <li>
            <strong>HH</strong>: 24小时制小时
          </li>
          <li>
            <strong>mm</strong>: 分钟
          </li>
          <li>
            <strong>ss</strong>: 秒
          </li>
        </ul>
        <h4>数据格式：</h4>
        <ul>
          <li>
            <strong>时间戳</strong>: 使用 dayjs().valueOf() 获取时间戳
          </li>
          <li>
            <strong>数组格式</strong>: 日期区间使用数组 [start, end]
          </li>
          <li>
            <strong>相对时间</strong>: fromNow 类型支持相对时间计算
          </li>
        </ul>
        <h4>Dayjs 操作：</h4>
        <ul>
          <li>
            <strong>add</strong>: 添加时间，如 add(-1, 'month') 表示一个月前
          </li>
          <li>
            <strong>valueOf</strong>: 获取时间戳
          </li>
          <li>
            <strong>格式化</strong>: 通过 format 方法格式化时间
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>日期展示</strong>: 展示各种格式的日期时间
          </li>
          <li>
            <strong>时间区间</strong>: 展示时间范围
          </li>
          <li>
            <strong>相对时间</strong>: 展示相对时间，如&quot;一个月前&quot;
          </li>
          <li>
            <strong>格式化定制</strong>: 根据需求定制显示格式
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>格式统一</strong>: 在项目中保持日期格式的一致性
          </li>
          <li>
            <strong>用户友好</strong>: 选择用户容易理解的格式
          </li>
          <li>
            <strong>国际化</strong>: 考虑不同地区的日期格式习惯
          </li>
          <li>
            <strong>性能考虑</strong>: 避免频繁的时间格式化操作
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

Remote request data

Display the definition list by requesting interface data

ProDescriptions Request 请求 Props 说明：

actionRef: 操作引用，用于调用组件方法
title: 描述列表标题
request: 异步请求函数，返回数据
extra: 右上角额外内容

Request 请求配置：

异步函数: 返回 Promise 对象
数据格式: { success: boolean, data: object }
自动加载: 组件挂载时自动请求数据
错误处理: 自动处理请求错误

columns 与 request 配合：

dataIndex: 数据字段名，自动绑定到 request 返回的数据
label: 标签文本
valueType: 值类型，决定如何渲染数据
render: 自定义内容，如操作按钮（valueType 为 option 时放入 extra 区域）

ActionRef 操作方法：

reload: 重新加载数据
reset: 重置数据
clearSelected: 清除选中状态

ValueType 类型：

date: 日期格式，自动格式化显示
money: 金额格式，自动添加货币符号
option: 操作按钮，支持自定义组件

Extra 额外内容：

React 节点: 支持任何 React 组件
操作按钮: 常用于添加操作按钮
样式控制: 可以自定义样式和交互

数据绑定特点：

自动绑定: 通过 dataIndex 自动绑定数据
类型安全: 提供完整的类型检查
响应式更新: 数据变化时自动更新显示

使用场景：

数据展示: 从 API 获取数据并展示
动态刷新: 通过按钮刷新数据
操作控制: 通过 actionRef 控制组件行为
用户交互: 提供用户操作界面

最佳实践：

错误处理: 在 request 中处理请求错误
加载状态: 提供加载状态反馈
数据验证: 验证返回数据的格式
用户体验: 提供清晰的操作反馈

import type { ProDescriptionsActionType } from '@ant-design/pro-components';
import { ProDescriptions } from '@ant-design/pro-components';
import { Button } from 'antd';
import { useRef } from 'react';

const Demo = () => {
  const actionRef = useRef<ProDescriptionsActionType>();
  return (
    <>
      <ProDescriptions
        actionRef={actionRef}
        title="高级定义列表 request"
        request={async () => {
          return Promise.resolve({
            success: true,
            data: { id: '这是一段文本', date: '20200730', money: '12121' },
          });
        }}
        extra={<Button type="link">修改</Button>}
        columns={[
          { dataIndex: 'id' },
          { dataIndex: 'date', label: '日期', valueType: 'date' },
          { label: 'money', dataIndex: 'money', valueType: 'money' },
          {
            label: '文本',
            valueType: 'option',
            render: () => [
              <Button
                type="primary"
                onClick={() => {
                  actionRef.current?.reload();
                }}
                key="reload"
              >
                刷新
              </Button>,
              <Button key="rest">重置</Button>,
            ],
          },
        ]}
      />

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>ProDescriptions Request 请求 Props 说明：</h4>
        <ul>
          <li>
            <strong>actionRef</strong>: 操作引用，用于调用组件方法
          </li>
          <li>
            <strong>title</strong>: 描述列表标题
          </li>
          <li>
            <strong>request</strong>: 异步请求函数，返回数据
          </li>
          <li>
            <strong>extra</strong>: 右上角额外内容
          </li>
        </ul>
        <h4>Request 请求配置：</h4>
        <ul>
          <li>
            <strong>异步函数</strong>: 返回 Promise 对象
          </li>
          <li>
            <strong>数据格式</strong>: &#123; success: boolean, data: object
            &#125;
          </li>
          <li>
            <strong>自动加载</strong>: 组件挂载时自动请求数据
          </li>
          <li>
            <strong>错误处理</strong>: 自动处理请求错误
          </li>
        </ul>
        <h4>columns 与 request 配合：</h4>
        <ul>
          <li>
            <strong>dataIndex</strong>: 数据字段名，自动绑定到 request
            返回的数据
          </li>
          <li>
            <strong>label</strong>: 标签文本
          </li>
          <li>
            <strong>valueType</strong>: 值类型，决定如何渲染数据
          </li>
          <li>
            <strong>render</strong>: 自定义内容，如操作按钮（valueType 为
            option 时放入 extra 区域）
          </li>
        </ul>
        <h4>ActionRef 操作方法：</h4>
        <ul>
          <li>
            <strong>reload</strong>: 重新加载数据
          </li>
          <li>
            <strong>reset</strong>: 重置数据
          </li>
          <li>
            <strong>clearSelected</strong>: 清除选中状态
          </li>
        </ul>
        <h4>ValueType 类型：</h4>
        <ul>
          <li>
            <strong>date</strong>: 日期格式，自动格式化显示
          </li>
          <li>
            <strong>money</strong>: 金额格式，自动添加货币符号
          </li>
          <li>
            <strong>option</strong>: 操作按钮，支持自定义组件
          </li>
        </ul>
        <h4>Extra 额外内容：</h4>
        <ul>
          <li>
            <strong>React 节点</strong>: 支持任何 React 组件
          </li>
          <li>
            <strong>操作按钮</strong>: 常用于添加操作按钮
          </li>
          <li>
            <strong>样式控制</strong>: 可以自定义样式和交互
          </li>
        </ul>
        <h4>数据绑定特点：</h4>
        <ul>
          <li>
            <strong>自动绑定</strong>: 通过 dataIndex 自动绑定数据
          </li>
          <li>
            <strong>类型安全</strong>: 提供完整的类型检查
          </li>
          <li>
            <strong>响应式更新</strong>: 数据变化时自动更新显示
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>数据展示</strong>: 从 API 获取数据并展示
          </li>
          <li>
            <strong>动态刷新</strong>: 通过按钮刷新数据
          </li>
          <li>
            <strong>操作控制</strong>: 通过 actionRef 控制组件行为
          </li>
          <li>
            <strong>用户交互</strong>: 提供用户操作界面
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>错误处理</strong>: 在 request 中处理请求错误
          </li>
          <li>
            <strong>加载状态</strong>: 提供加载状态反馈
          </li>
          <li>
            <strong>数据验证</strong>: 验证返回数据的格式
          </li>
          <li>
            <strong>用户体验</strong>: 提供清晰的操作反馈
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

Columns configuration

Display the definition list by requesting interface data and columns

ProDescriptions Columns 配置 Props 说明：

title: 描述列表标题
request: 异步请求函数，返回数据
emptyText: 空数据时显示的文本
columns: 列配置数组，定义每列的属性

Column 配置项：

title: 列标题
key: 列的唯一标识
dataIndex: 数据字段名
valueType: 值类型，决定如何渲染
valueEnum: 枚举值配置
fieldProps: 字段属性配置
render: 自定义渲染函数

ValueType 类型：

select: 选择框，配合 valueEnum 使用
date: 日期格式
switch: 开关组件
money: 金额格式
option: 操作按钮
percent: 百分比格式

FieldProps 字段属性：

format: 日期格式化字符串，如 'DD.MM.YYYY'
moneySymbol: 货币符号，可以是字符串或 false
自定义属性: 根据 valueType 传递相应属性

ValueEnum 枚举配置：

text: 显示的文本
status: 状态类型，影响显示样式
支持状态: Default, Error, Success, Processing

Render 自定义渲染：

函数返回: 返回 React 节点数组
操作按钮: 常用于渲染操作链接或按钮
样式控制: 完全控制渲染内容的样式

列配置方式：

columns: 通过 columns 数组统一定义全部展示项

使用场景：

动态列: 根据数据动态生成列配置
复杂展示: 展示各种类型的数据
操作列: 添加操作按钮或链接
格式化显示: 自定义数据格式化方式

最佳实践：

列配置: 使用 columns 配置批量定义列
字段属性: 通过 fieldProps 传递组件属性
自定义渲染: 使用 render 函数实现复杂渲染
类型匹配: 选择合适的 valueType 展示数据

import { ProDescriptions } from '@ant-design/pro-components';

const Demo = () => {
  return (
    <>
      <ProDescriptions
        title="高级定义列表request columns"
        request={async () => {
          return Promise.resolve({
            success: true,
            data: {
              date: '20200809',
              money: '1212100',
              money2: -12345.33,
              state: 'all',
              switch: true,
              state2: 'open',
            },
          });
        }}
        emptyText={'空'}
        columns={[
          {
            title: '文本',
            key: 'text',
            dataIndex: 'id',
          },
          {
            title: '状态',
            key: 'state',
            dataIndex: 'state',
            valueType: 'select',
            valueEnum: {
              all: { text: '全部', status: 'Default' },
              open: {
                text: '未解决',
                status: 'Error',
              },
              closed: {
                text: '已解决',
                status: 'Success',
              },
            },
          },
          {
            title: '状态2',
            key: 'state2',
            dataIndex: 'state2',
          },
          {
            title: '时间',
            key: 'date',
            dataIndex: 'date',
            valueType: 'date',
          },
          {
            title: '时间（自定义格式）',
            key: 'date-formatted',
            dataIndex: 'date',
            valueType: 'date',
            fieldProps: {
              format: 'DD.MM.YYYY',
            },
          },
          {
            title: '开关',
            key: 'switch',
            dataIndex: 'switch',
            valueType: 'switch',
          },
          {
            title: 'money',
            key: 'money',
            dataIndex: 'money',
            valueType: 'money',
            fieldProps: {
              moneySymbol: '$',
            },
          },
          {
            title: 'money无符号',
            key: 'money-no-symbol',
            dataIndex: 'money',
            valueType: 'money',
            fieldProps: {
              moneySymbol: false,
            },
          },
          {
            title: 'money负数无符号',
            key: 'money2',
            dataIndex: 'money2',
            valueType: 'money',
            fieldProps: {
              moneySymbol: false,
            },
          },
          {
            title: '操作',
            valueType: 'option',
            render: () => [
              <a target="_blank" rel="noopener noreferrer" key="link">
                链路
              </a>,
              <a target="_blank" rel="noopener noreferrer" key="warning">
                报警
              </a>,
              <a target="_blank" rel="noopener noreferrer" key="view">
                查看
              </a>,
            ],
          },
          {
            dataIndex: 'percent',
            label: '百分比',
            valueType: 'percent',
            children: 100,
          },
          {
            title: '多余节点',
            render: () => <div>多余的dom</div>,
          },
          {
            label: '超链接',
            children: <a href="alipay.com">超链接</a>,
          },
        ]}
      />

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>ProDescriptions Columns 配置 Props 说明：</h4>
        <ul>
          <li>
            <strong>title</strong>: 描述列表标题
          </li>
          <li>
            <strong>request</strong>: 异步请求函数，返回数据
          </li>
          <li>
            <strong>emptyText</strong>: 空数据时显示的文本
          </li>
          <li>
            <strong>columns</strong>: 列配置数组，定义每列的属性
          </li>
        </ul>
        <h4>Column 配置项：</h4>
        <ul>
          <li>
            <strong>title</strong>: 列标题
          </li>
          <li>
            <strong>key</strong>: 列的唯一标识
          </li>
          <li>
            <strong>dataIndex</strong>: 数据字段名
          </li>
          <li>
            <strong>valueType</strong>: 值类型，决定如何渲染
          </li>
          <li>
            <strong>valueEnum</strong>: 枚举值配置
          </li>
          <li>
            <strong>fieldProps</strong>: 字段属性配置
          </li>
          <li>
            <strong>render</strong>: 自定义渲染函数
          </li>
        </ul>
        <h4>ValueType 类型：</h4>
        <ul>
          <li>
            <strong>select</strong>: 选择框，配合 valueEnum 使用
          </li>
          <li>
            <strong>date</strong>: 日期格式
          </li>
          <li>
            <strong>switch</strong>: 开关组件
          </li>
          <li>
            <strong>money</strong>: 金额格式
          </li>
          <li>
            <strong>option</strong>: 操作按钮
          </li>
          <li>
            <strong>percent</strong>: 百分比格式
          </li>
        </ul>
        <h4>FieldProps 字段属性：</h4>
        <ul>
          <li>
            <strong>format</strong>: 日期格式化字符串，如 'DD.MM.YYYY'
          </li>
          <li>
            <strong>moneySymbol</strong>: 货币符号，可以是字符串或 false
          </li>
          <li>
            <strong>自定义属性</strong>: 根据 valueType 传递相应属性
          </li>
        </ul>
        <h4>ValueEnum 枚举配置：</h4>
        <ul>
          <li>
            <strong>text</strong>: 显示的文本
          </li>
          <li>
            <strong>status</strong>: 状态类型，影响显示样式
          </li>
          <li>
            <strong>支持状态</strong>: Default, Error, Success, Processing
          </li>
        </ul>
        <h4>Render 自定义渲染：</h4>
        <ul>
          <li>
            <strong>函数返回</strong>: 返回 React 节点数组
          </li>
          <li>
            <strong>操作按钮</strong>: 常用于渲染操作链接或按钮
          </li>
          <li>
            <strong>样式控制</strong>: 完全控制渲染内容的样式
          </li>
        </ul>
        <h4>列配置方式：</h4>
        <ul>
          <li>
            <strong>columns</strong>: 通过 columns 数组统一定义全部展示项
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>动态列</strong>: 根据数据动态生成列配置
          </li>
          <li>
            <strong>复杂展示</strong>: 展示各种类型的数据
          </li>
          <li>
            <strong>操作列</strong>: 添加操作按钮或链接
          </li>
          <li>
            <strong>格式化显示</strong>: 自定义数据格式化方式
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>列配置</strong>: 使用 columns 配置批量定义列
          </li>
          <li>
            <strong>字段属性</strong>: 通过 fieldProps 传递组件属性
          </li>
          <li>
            <strong>自定义渲染</strong>: 使用 render 函数实现复杂渲染
          </li>
          <li>
            <strong>类型匹配</strong>: 选择合适的 valueType 展示数据
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

dataSource configuration data

ProDescriptions supports the same dataSource as Table

dataSource and columns

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

ProDescriptions DataSource 数据源 Props 说明：

title: 描述列表标题
dataSource: 数据源对象，直接提供数据
columns: 列配置数组，定义每列的属性

DataSource 数据源配置：

对象格式: 直接提供数据对象
字段映射: 通过 dataIndex 映射到数据字段
静态数据: 适合展示静态或已知数据
性能优势: 无需异步请求，性能更好

Column 配置项：

title: 列标题
key: 列的唯一标识
dataIndex: 数据字段名，对应 dataSource 中的字段
ellipsis: 是否显示省略号
copyable: 是否可复制
valueType: 值类型，决定如何渲染
valueEnum: 枚举值配置
render: 自定义渲染函数

ValueType 类型：

select: 选择框，配合 valueEnum 使用
date: 日期格式
money: 金额格式
percent: 百分比格式
option: 操作按钮

ValueEnum 枚举配置：

text: 显示的文本
status: 状态类型，影响显示样式
支持状态: Default, Error, Success, Processing

Render 自定义渲染：

函数返回: 返回 React 节点数组
操作按钮: 常用于渲染操作链接或按钮
样式控制: 完全控制渲染内容的样式

列配置方式：

columns: 通过 columns 数组定义全部列

与 Request 的区别：

数据来源: dataSource 直接提供数据，request 异步获取
使用场景: dataSource 适合静态数据，request 适合动态数据
性能差异: dataSource 性能更好，无需网络请求
错误处理: dataSource 无需处理请求错误

使用场景：

静态数据: 展示已知的静态数据
配置展示: 展示系统配置信息
表单预览: 展示表单提交的数据
详情页面: 展示对象详细信息

最佳实践：

数据准备: 确保 dataSource 包含所有需要的字段
列配置: 使用 columns 配置批量定义列
类型匹配: 选择合适的 valueType 展示数据
性能优化: 对于静态数据优先使用 dataSource

import { ProDescriptions } from '@ant-design/pro-components';

const Demo = () => {
  return (
    <>
      <ProDescriptions
        title="dataSource and columns"
        dataSource={{
          id: '这是一段文本columns',
          date: '20200809',
          money: '1212100',
          state: 'all',
          state2: 'open',
        }}
        columns={[
          {
            title: '文本',
            key: 'text',
            dataIndex: 'id',
            ellipsis: true,
            copyable: true,
          },
          {
            title: '状态',
            key: 'state',
            dataIndex: 'state',
            valueType: 'select',
            valueEnum: {
              all: { text: '全部', status: 'Default' },
              open: {
                text: '未解决',
                status: 'Error',
              },
              closed: {
                text: '已解决',
                status: 'Success',
              },
            },
          },
          {
            title: '状态2',
            key: 'state2',
            dataIndex: 'state2',
          },
          {
            title: '时间',
            key: 'date',
            dataIndex: 'date',
            valueType: 'date',
          },
          {
            title: 'money',
            key: 'money',
            dataIndex: 'money',
            valueType: 'money',
          },
          {
            title: '操作',
            valueType: 'option',
            render: () => [
              <a target="_blank" rel="noopener noreferrer" key="link">
                链路
              </a>,
              <a target="_blank" rel="noopener noreferrer" key="warning">
                报警
              </a>,
              <a target="_blank" rel="noopener noreferrer" key="view">
                查看
              </a>,
            ],
          },
          {
            label: '百分比',
            valueType: 'percent',
            children: 100,
          },
        ]}
      />

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>ProDescriptions DataSource 数据源 Props 说明：</h4>
        <ul>
          <li>
            <strong>title</strong>: 描述列表标题
          </li>
          <li>
            <strong>dataSource</strong>: 数据源对象，直接提供数据
          </li>
          <li>
            <strong>columns</strong>: 列配置数组，定义每列的属性
          </li>
        </ul>
        <h4>DataSource 数据源配置：</h4>
        <ul>
          <li>
            <strong>对象格式</strong>: 直接提供数据对象
          </li>
          <li>
            <strong>字段映射</strong>: 通过 dataIndex 映射到数据字段
          </li>
          <li>
            <strong>静态数据</strong>: 适合展示静态或已知数据
          </li>
          <li>
            <strong>性能优势</strong>: 无需异步请求，性能更好
          </li>
        </ul>
        <h4>Column 配置项：</h4>
        <ul>
          <li>
            <strong>title</strong>: 列标题
          </li>
          <li>
            <strong>key</strong>: 列的唯一标识
          </li>
          <li>
            <strong>dataIndex</strong>: 数据字段名，对应 dataSource 中的字段
          </li>
          <li>
            <strong>ellipsis</strong>: 是否显示省略号
          </li>
          <li>
            <strong>copyable</strong>: 是否可复制
          </li>
          <li>
            <strong>valueType</strong>: 值类型，决定如何渲染
          </li>
          <li>
            <strong>valueEnum</strong>: 枚举值配置
          </li>
          <li>
            <strong>render</strong>: 自定义渲染函数
          </li>
        </ul>
        <h4>ValueType 类型：</h4>
        <ul>
          <li>
            <strong>select</strong>: 选择框，配合 valueEnum 使用
          </li>
          <li>
            <strong>date</strong>: 日期格式
          </li>
          <li>
            <strong>money</strong>: 金额格式
          </li>
          <li>
            <strong>percent</strong>: 百分比格式
          </li>
          <li>
            <strong>option</strong>: 操作按钮
          </li>
        </ul>
        <h4>ValueEnum 枚举配置：</h4>
        <ul>
          <li>
            <strong>text</strong>: 显示的文本
          </li>
          <li>
            <strong>status</strong>: 状态类型，影响显示样式
          </li>
          <li>
            <strong>支持状态</strong>: Default, Error, Success, Processing
          </li>
        </ul>
        <h4>Render 自定义渲染：</h4>
        <ul>
          <li>
            <strong>函数返回</strong>: 返回 React 节点数组
          </li>
          <li>
            <strong>操作按钮</strong>: 常用于渲染操作链接或按钮
          </li>
          <li>
            <strong>样式控制</strong>: 完全控制渲染内容的样式
          </li>
        </ul>
        <h4>列配置方式：</h4>
        <ul>
          <li>
            <strong>columns</strong>: 通过 columns 数组定义全部列
          </li>
        </ul>
        <h4>与 Request 的区别：</h4>
        <ul>
          <li>
            <strong>数据来源</strong>: dataSource 直接提供数据，request 异步获取
          </li>
          <li>
            <strong>使用场景</strong>: dataSource 适合静态数据，request
            适合动态数据
          </li>
          <li>
            <strong>性能差异</strong>: dataSource 性能更好，无需网络请求
          </li>
          <li>
            <strong>错误处理</strong>: dataSource 无需处理请求错误
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>静态数据</strong>: 展示已知的静态数据
          </li>
          <li>
            <strong>配置展示</strong>: 展示系统配置信息
          </li>
          <li>
            <strong>表单预览</strong>: 展示表单提交的数据
          </li>
          <li>
            <strong>详情页面</strong>: 展示对象详细信息
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>数据准备</strong>: 确保 dataSource 包含所有需要的字段
          </li>
          <li>
            <strong>列配置</strong>: 使用 columns 配置批量定义列
          </li>
          <li>
            <strong>类型匹配</strong>: 选择合适的 valueType 展示数据
          </li>
          <li>
            <strong>性能优化</strong>: 对于静态数据优先使用 dataSource
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

Editable definition list

API is the same as ProTable

import { ProDescriptions } from '@ant-design/pro-components';
import { Input, Tooltip } from 'antd';
import { useRef } from 'react';

const Demo = () => {
  const actionRef = useRef();
  return (
    <ProDescriptions
      actionRef={actionRef}
      formProps={{
        onValuesChange: (e, f) => console.log(f),
      }}
      title="可编辑的订单详情"
      request={async () => {
        return Promise.resolve({
          success: true,
          data: {
            rate: 4,
            id: 'ORD-2024-0115-0001',
            date: '20240115',
            money: '128000',
            state: 'processing',
            state2: 'open',
            textarea:
              '客户要求在一季度内完成全部部署上线工作，优先安排专属技术支持团队跟进对接，确保各环节顺利推进并做好验收准备',
          },
        });
      }}
      editable={{}}
      columns={[
        {
          title: '订单编号',
          key: 'text',
          dataIndex: 'id',
          copyable: true,
          ellipsis: true,
        },
        {
          title: '订单状态',
          key: 'state',
          dataIndex: 'state',
          valueType: 'select',
          editable: false,
          valueEnum: {
            pending: { text: '待审核', status: 'Warning' },
            processing: {
              text: '处理中',
              status: 'Processing',
            },
            completed: {
              text: '已完成',
              status: 'Success',
            },
            rejected: {
              text: '已驳回',
              status: 'Error',
            },
          },
        },
        {
          title: '订单备注',
          key: 'textarea',
          dataIndex: 'textarea',
          valueType: 'textarea',
          formItemProps: {
            style: {
              flex: 1,
            },
          },
        },
        {
          title: '付款状态',
          key: 'state2',
          dataIndex: 'state2',
          formItemRender: () => {
            return <Input placeholder="输入 Success 切换评分方式" />;
          },
        },
        {
          title: '评分',
          dataIndex: 'fraction',
          valueType: (record) => {
            const scoringMethod = record?.state2;
            if (scoringMethod === 'Success') return 'select';
            return 'digit';
          },
          fieldProps: {
            mode: 'multiple',
          },
          request: async () =>
            ['优秀', '良好', '一般', '待改进', '不合格'].map((item, index) => ({
              label: item,
              value: index,
            })),
        },
        {
          title: '签约日期',
          key: 'date',
          dataIndex: 'date',
          valueType: 'date',
        },
        {
          title: '满意度',
          key: 'rate',
          dataIndex: 'rate',
          valueType: 'rate',
        },
        {
          title: '合同金额',
          key: 'money',
          dataIndex: 'money',
          valueType: 'money',
          render: (dom, entity, index, action) => {
            return (
              <Tooltip title="点击进入编辑状态">
                <div
                  onClick={() => {
                    action?.startEditable('money');
                  }}
                >
                  {dom}
                </div>
              </Tooltip>
            );
          },
        },
        {
          title: '操作',
          valueType: 'option',
          render: () => [
            <a target="_blank" rel="noopener noreferrer" key="detail">
              详情
            </a>,
            <a target="_blank" rel="noopener noreferrer" key="log">
              日志
            </a>,
            <a target="_blank" rel="noopener noreferrer" key="track">
              物流追踪
            </a>,
          ],
        },
        {
          dataIndex: 'percent',
          label: '交付进度',
          valueType: 'percent',
          children: 75,
        },
      ]}
    />
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

API