# 数据展示 #### 列表展示数据 列表是用于表单填报组件的数据展示，根据不同使用场景提供7种列表模式 图1列表模式 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002140817982.png) 图2首页列表 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002140659906.png) **列表的布局结构分为：** - 菜单栏：用于列表的组件拼装、基础设置等配置 - 左侧配置栏：用于列表组件展示 - 列表配置区：用于预览列表区，静态数据编辑等 - 右侧配置区：用于列表的样式、数据、交互配置 **列表左侧配置栏说明：** 1. 新建的空白列表，支持选择已有页面（选择系统中全部应用中的表单、详情、列表）进行关联，主要应用场景为：配置一个员工信息填报的表单后，在空白列表中可直接选择该表单，进行字段复用，原表单/详情/列表若绑定了资产，则关联的表单/详情/列表同样绑定资产，修改/删除则同步改变关联的表单/详情/列表的绑定逻辑 图3页面选择 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002175977441.png) 2. 关联后的表单/详情/列表在左侧可一键插入、或者拖入新增的组件 图4一键插入 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002144217972.png) **列表区配置说明：** 图5列表区配置 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002144217728.png) 列表区主要用于配置效果的预览，达到了配置的所见即所得效果，其中列表模式支持编辑表格的字体和背景色，如下图所示：用于在构建原型时快速修改样式 图6构建原型时快速修改样式 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002179656089.png) **列表右侧配置区说明：**由于各模式的右侧配置项不同，下面将逐个介绍： **表格模式配置项说明：** 应用场景**：**多用于人员信息管理、工单信息管理等表格类列表 图7导出数据 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002175977445.png) 图8首页列表 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002179735629.png) **日历模式配置项说明：** 应用场景：多用于员工排班、任务管理类和日期强相关的场景，可以直接按月、周、日直接显示每个时间点的具体信息，更加直观的查看数据 图9日历模式配置 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002140817990.png) **时间轴模式配置项说明：** 应用场景：多用于项目管理、事件管理等和关键时间点相关的数据展示 图10时间轴模式配置1 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002140659914.png) 图11时间轴模式配置2 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002175977449.png) **看板模式配置项说明：** 应用场景：多用于团队协作的任务管理、项目关联的需求管理，便于更加直观的查看每个节点下的关联数据，拖拽的功能可快速调整修改数据 图12看板模式配置 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002179657989.png) **目录模式配置项说明：** 应用场景：用于主子表关联展示信息，如项目名称对应的项目需求信息，下图所示的班组中公司名称对应的公司人员信息 图13目录模式配置1 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002179737481.png) 图14目录模式配置2 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002144223660.png) **画布卡片模式配置项说明：** 应用场景：多用于非结构化展示的数据，在不同业务场景下展示的数据布局、样式不同的配置，下图所示结合了目录模式+画布列表模式，实现不同的产品类型对应产品参数展示 图15画布卡片模式配置1 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002144383104.png) 画布卡片和画布列表操作基本相同，唯一区别是卡片需通过分组规则定义分组字段，画布列表无需分组，固统一在该章节介绍画布卡片和画布列表 图16画布卡片模式配置2 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002176099069.png) 1. 通过一键插入的组件，在数据配置栏中可拖拽组件至画布卡片中进行布局 图17布局 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002140817998.png) 2. 单击其他空白卡片，选择新增卡片 图18新增卡片 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002140659922.png) 也可通过原卡片右上角的复制按钮，基于原卡片进行组件的布局和样式修改 图19复制 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002175977457.png) 3. 选中卡片，右上角的条件按钮触发显示条件弹窗，配置不同卡片的布局和样式，可以通过以下配置显示条件的方式，进行不同数据条件下画布显示的样式 支持通过组件、角色、索引配置不同的显示条件 图20显示条件 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002176099073.png) 4. 选中卡片中的组件，在右侧配置栏中可配置组件的样式、数据、交互 样式：每个组件均支持配置位置约束（居左、居右、左右拉伸、居上、居下、上下拉伸）用于在卡片不同分辨下，组件位置固定展示，其他组件的样式配置项根据各自组件属性进行配置 数据：支持配置静态数据用于快速构建原型对齐需求，支持配置资产数据，根据业务数据渲染最终显示效果 图21业务模型 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002140818002.png) #### 详情展示数据 详情组件用于单条数据展示，根据不同场景提供2种模式 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002140659926.png) **表格模式说明：** 应用场景：常用于显示具体明细的场景，如设备管理中各参数信息，可结合布局组件调整显示效果 图22表格模式 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002175977461.png) - 菜单栏：用于配置详情页的组件插入，基础设置及逻辑绑定等 - 详情左侧栏：用于选择已有页面快速配置详情，展示详情组件区，逻辑同列表左侧配置说明，固该章节不再重复介绍 - 详情设计区：用于配置详情页最终展现形式，逻辑同表单设计，固该章节不再重复介绍 - 详情右侧栏：用于组件的样式、数据、交互配置，逻辑同表单设计-组件配置，固该章节不再重复介绍 **画布模式说明：** 应用场景：常用于显示非结构化的单条数据展示，通过画布详情的布局和样式能力调整多样化展现形式 图23画布模式 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002179665913.png) 1. 选择已有页面，复用系统内全部应用中的表单/列表/详情的组件（及组件所绑定的资产字段） 图24详情配置 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002140818006.png) 2. 单击详情配置，配置该详情展示形式 图25配置该详情展示形式 ![](https://support.huaweicloud.com/nscf-saasapp/zh-cn_image_0000002140659930.png)