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

代码演示

基础定义列表

基本使用

订单详情

订单备注客户要求在一季度内完成全部部署上线工作，优先安排专属技术支持团队跟进对接，确保各环节顺利推进客户要求在一季度内完成全部部署上线工作，优先安排专属技术支持团队跟进对接，确保各环节顺利推进
合同金额 ¥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" } } }`

基础定义列表

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>
);

数组类型 dataIndex

数组类型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>
);

格式化配置

根据配置格式化日期

高级定义列表

日期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>
);

远程请求数据

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

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 配置

通过请求接口数据和 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 配置数据

ProDescriptions 支持了和 Table 相同的 dataSource

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>
);

可编辑的定义列表

API 与 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