一、概述

     主要为实现数以后在信息项的查看功能,简化做查看页面,这时候就要用到ProDescriptions组件。

      (1)我们可以整个查看页面,来自远程服务的数据(例如数据库的)这时候可以整体设置ProDescriptions的request属性 + ProDescriptions.Item dataIndex。

       (2)我们可以单独设置每个查看项的,通过:ProDescriptions.Item

       (3)也可以通过请求接口数据和 columns来展现,我个人不太推荐这种,不太灵活,但可以减化页面代码量。

        (4)支持dataSource 配置数据

         (5)可以按编辑效果显示查看,即每个查看项后面均有一个编辑的图标,一次只对一项进行编辑。

二、代码示例

    1.设定查看页面的标题,列数、操作提示,例如:<ProDescriptions column={2} title="高级定义列表" tooltip="包含了从服务器请求,columns等功能">

    2. 查看项单个设置,不同的数据类型设置的valueType不一样:

         范1 常见的:<ProDescriptions.Item label="文本" valueType="option">

         范2 合并列:<ProDescriptions.Item span={2} label="文本">

         范3 下拉选择: 见官方例子

         范4  来自远程服务的数据: request属性的用法,见官方例子

         范3  带操作提示图标:<ProDescriptions.Item label="金额" tooltip="仅供参考,以实际为准" valueType="money">

<ProCard colSpan="calc(100% - 500px)">
        <ProDescriptions
          title="高级定义列表"
          {...values}
          request={async () => {
            return Promise.resolve({
              success: true,
              data: {
                id: '这是一段文本columns',
                date: '20200809',
                money: '1212100',
                state: 'all',
                state2: 'open',
                percent: '20%',
              },
            });
          }}
        />
      </ProCard>