跳到主要内容

详情

成组展示多个只读字段。

何时使用​

  • 用于详情页的信息展示
  • 详情页还需要在右上角扩展组件或者在底部扩展组件

一、属性​

1. 数据源​

image-20250618103154229

详情组件提供三种数据绑定的方式，具体使用方法详见 数据绑定。

2. 功能​

标题​

详情组件的标题设置在左上角，一般用来标注显示详情组件的标题。

image-20250618103505056

打开设计时，可以删除标题，在左上角放其他组件。

image-20250618103848747

3. 详情项​

用于删除或者添加详情页的展示项。

image-20240828085845666

4. 外观​

4.1 单行列数​

默认单行列数为 2，表示 1 行占 2 项；如果为 4，则表示 1 行占 4 项。默认值为 3。

单行列数为 4 时：

image-20250618105551819

image-20240828090207377

4.2 布局方向​

用于设置标签与内容的显示位置关系。

image-20240828090712501

垂直时：

image-20240828090542104

水平时：

image-20240828090748757

4.3 尺寸​

设置详情组件的尺寸。

image-20240828091643684

4.4 显示边框​

用于设置详情组件边框的开关，默认开启。

image-20240828091746903

当显示边框关闭时：

image-20240828092128212

4.5 冒号​

冒号设置默认开启。

image-20240828092407444

下图中标签名后面均带有冒号：

image-20240828092607523

注：当显示边框开启时，会屏蔽冒号的设置。

5. 操作区​

可设置隐藏右上角组件。

image-20250618110032537

隐藏后的效果如下：

image-20250618110328754

二、常见使用场景​

1. 详情页面展示数据​

展示图书的详细信息：

image-20240819161925161

2. 展示一对多级联数据​

展示订单的详细信息，级联展示订单详情：

image-20240819161943300

3. 详情页配置操作按钮​

如在用户详情页面配置分配角色按钮：

image-20240819161955121