# 分段

来源快照：`result_data_new_260518.json`

- 来源 ID：`1184675976134664277`
- 模块：低代码平台e-builder
- 目录：页面引擎 - 页面设计器 - 页面组件 - 基础组件 - 基础组件/数据展示类
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

# 分段

## 一、功能背景及价值用途

在低代码平台开发过程中，分段组件作为实现不同分类或状态展示的关键工具，其功能和灵活性要求越来越高。分段组件允许开发者在无需编写复杂代码的情况下，通过简单的拖拽操作，即可快速创建和定制符合业务需求的分段控件。每个分段项都可以与不同的内容或视图相对应，选中某一分段时，其他分段项则自动处于未选中状态，确保了互斥选择的交互效果。

## 二、配置过程图

每个分段项对应不同内容或视图，选中某一项时其他项自动取消选中，实现互斥选择效果。

## 三、使用说明

### 1、功能入口

设计器左侧“基础组件/数据展示类”分类下选中分段组件，在右侧配置面板操作相关配置。

支持数据项配置，可配置名称、数据集、动作、数字提示。数据项可新增、删除、复制。启用数字提示功能，需同步配置提示内容。提示内容详细配置参考[数据集配置文档](https://weapp.eteams.cn/sp/ebdpage/view/freepass/1152863419640021002?id=1160524116543250563&freepass_doc=1&space_id=1157961794811633670 "数据集配置文档")。

 

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160549770511056907&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 2、样式设置

支持选择组件自定义样式模板（滑动按钮式）。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160549757567434784&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 3、事件配置

用户可通过事件配置设置分段组件的动作，其中事件动作类型可分为“打开页面 ”、"关闭窗口"、"条件控制"、"显示/隐藏组件"、"JavaScript"、"刷新组件"等(详情可见[事件配置参考文档](https://weapp.eteams.cn/sp/ebdpage/view/freepass/1152863419640021002?id=1159192088358584536&freepass_doc=1&space_id=1157961794811633670 "事件配置参考文档"))。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550230070460498&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

## 四、示例说明

1、示例效果：点击分段按钮时触发不同事件，打开指定窗口、关闭当前窗口与刷新指定组件内容。其中刷新组件功能常用于移动端，如在任务台账中，通过点击按钮根据任务状态刷新台账信息。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550659438329898&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

2.

配置步骤说明：在页面设计器中，拖入分段组件，通过数据项动作配置达到触发不同事件的目的。选择组件可选择本页面上的组件，类型暂限制为列表和图表。其中列表不包含业务列表。

一、

在页面设计器中拖入分段件与列表组件

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160549753076605011&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

二、

选择分段组件，数据项中修改标题为未开始，点击动作按钮。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550612213497952&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

三、

设置"动作"为"刷新组件"，"选择组件"任务列表，"条件设置"中配置任务状态等于未![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550126943010863&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160551153482137620&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550899950313555&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

四、

参考数据项"未开始"配置数据项"进行中"和"已完成"，配置完成运行效果如图所示：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550019431686167&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)
