一、概述
主要为实现数以后在信息项的查看功能,简化做查看页面,这时候就要用到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>