# 步骤条

来源快照：`result_data_new_260518.json`

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

## 正文

# 步骤条

一、

## 功能背景及其价值用途

步骤条组件用于引导用户按照步骤完成任务的导航条，当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。常见用法：表单设计器、页面设计器内与其他组件搭配使用，根据字段值跳转到对应步骤。

二、

## 功能概述

步骤条组件设置分为基础设置、步骤内容设置、步骤详细设置、新建步骤、步骤详情、步骤切换按钮、其他设置。

三、

## 功能使用说明

配置入口：EB表单、EB页面、业务模块表单

 

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160549993606086691&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.1 属性-基础属性

标题、图标、启用标题，通用属性，不展开说明，都是统一的逻辑

### 3.2 属性-基础设置

设置步骤条排列类型【横向排列、纵向排列】；是否启用步骤容器，开关联动步骤切换按钮；选择步骤条来源，可设置数据源或者手动添加，选择数据源时，可设置数据过滤，数据排序，设置手动添加时，可自定义步骤个数，名称，描述，事件动作，默认跳转步骤，步骤显示条件。

**3.2.1排列类型：** 纵向、横向【联动信息显示位置，纵向时名称描述为左右显示，横向时名称描述为上下显示】

**3.2.2步骤容器设置****[丁嘉玲1]****：** 启用步骤容器：1、关闭容器后，步骤按钮同步关闭，且步骤切换按钮菜单同步关闭。设置容器背景色、边框线、水平垂直位移。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160549791932637245&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.2.3步骤来源：** 手动添加、数据源

手动添加：自定义步骤名称、描述、默认展示条件、显示条件、动作

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550479041314817&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=1160550101002510448&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=1160550702432149572&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.3 非数据源—步骤设置

可单个或批量编辑步骤名称、描述、默认展示条件、显示条件、事件动作

 

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160551243584176210&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.4 数据源—步骤内容设置

名称、描述可插入当前数据源内数据

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550771118899207&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.5 数据源—步骤详细设置

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160549684365516916&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=1160551325155000421&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=1160550732452774035&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.6 新建步骤

对于样式中的圆角无序，圆圈有序，圆圈无序，方块有序，图标无序，连续有序类型不支持新建；

可自定义新建名称、显示条件、动作事件，文字/链接样式

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550882810183802&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.7 步骤详情【浮窗展示】

**3.7.1 非数据源**

EB页面：富文本框内自定义内容，设置显隐条件

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160549735924826146&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)

EB表单：自定义【同EB页面使用方法】，表单字段【该表单内拖入的表单组件】

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550710955802724&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.7.2 数据源**

EB页面：自定义、数据源【字段配置九宫格内，插入数据源内字段】

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550011029225569&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)

EB表单：支持表单字段，数据源、自定义

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550174078599175&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.8 其他设置

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160551007277088848&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.8.1 步骤点击事件**

切换步骤状态【默认】

不可点击：不可点击切换步骤与容器

仅切换容器[丁嘉玲6]【使用条件：关闭按钮】：点击步骤可切换查看其下容器内容，不更改步骤状态

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550401734934564&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.8.2 多步骤显示[丁嘉玲7]

滚动条显示【默认】

换行从头显示：超出组件高度或者宽度，步骤换行显示

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160549929279316033&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=1160550607977250841&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.8.2组件高度设置****[丁嘉玲8]**

**3.8.2.1整体设置**

EB页面：拖拽高度【默认】，自适应高度【根据步骤条与容器高度，算出整体高度,无法手动拖拽，切换步骤时，根据每个步骤的容器进行自适应高度】

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160549890647572520&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)

 

EB表单：固定高度【自定义组件高度，单位px】，自适应高度【默认】

 

**3.8.2.2步骤条、容器宽高**

默认宽高、固定宽高【若整体高度为自适应高度时，容器、步骤条切换为固定高度，高度单位为%，设置不生效，单位为px生效】

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160551346532433957&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.8.3 信息位置**

对于样式中的圆角无序、静态有序、箭头有序、箭头无序、锥形无序、锥形图标信息在步骤内类型的，该设置不生效

 

 

**3.8.4 按钮配置**

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550448897785867&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.8.5步骤拖拽**

仅数据源情况下，该按钮显示，圆角无序，圆圈有序，圆圈无序，方块有序，图标无序，连续有序，箭头有序类型不支持拖拽；启用后，前台用户可拖动步骤条进行排序

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550667939020875&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)

 

四、

## 常见搭建场景

### 4.1默认步骤跳转

**4.1.1非数据源**

**4.1.1.1数据集**

 

**常用场景：** 非数据源步骤条，需要根据表单内某个字段值，跳转到对应步骤

 

注意：设置数据集时，需筛选数据集条件，筛选出目标数据，不筛选条件，默认只匹配第一条数据

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550758140895301&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)

 

EG：根据数据源0317步骤条表单内，单选框等于选项一时，跳转到步骤7777，如上图所示他设置好数据集后，步骤设置内，默认展示条件，设置数据集内字段，单选框=选项一，配置表单点击事件，打开步骤条设置页面，传入需要的参数。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160549912164352072&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=1160550741131722891&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=1160549959251812489&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=1160550384664117261&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)

**4.1.1.2页面传参**

 通过页面参数传递的方式，直接在步骤条内进行匹配，传递页面参数时，可选择显式传参/隐式传参[丁嘉玲9][丁嘉玲10]，步骤条内，默认跳转步骤处，配置下这个约定参数，可以进行默认跳转

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550655235637426&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=1160550367459082276&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=1160551213415817223&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)

 

 

**4.1.1.3字段相关****[丁嘉玲11]**

注：仅表单内支持字段相关功能

默认跳转步骤处，可选择当前表单内拖入的表单字段组件，进行条件匹配，可搭配数据集、页面传参使用

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550320244965398&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)

 

**4.1.2数据源**

**4.1.2.1 EB页面**

支持手动输入、本表字段【本表字段常用于需要根据数据源内字段跳转时】

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550071153639499&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)

 

**4.1.2.2 EB表单**

支持手动输入、本表字段、变量字段【常用于需要根据当前表单内数据跳转时】

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160549744643850403&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)

 

### 4.2组件高度设置

1、EB页面：拖拽高度、自适应高度【具体配置看2.8.2 组件高度设置】

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550732452773996&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、EB表单：固定高度、自适应高度【具体配置看2.8.2 组件高度设置】

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550955749130252&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)

 

### 4.3步骤切换按钮显隐

1.

不需要所有步骤按钮时，可关闭显示开关[丁嘉玲12]

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550758247743699&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.

自定义按钮可删除，增加【每个步骤内，最多可设置5个步按钮】；上一步、下一步不可删除，只可隐藏[丁嘉玲13]

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550693674442855&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=1160550788365877264&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)

## 六、上下游关联功能

一、

数据集：设置目标数数据源为数据集，条件筛选目标数据源的某条数据，默认展示步骤内，选择数据集，设置跳转条件；外部打开步骤条所在表单时，可跳转到默认步骤【具体可参考搭建场景4.1.1】

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160549710203256840&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)

## 七、功能更新列表

### 10.0.25.0401

1、步骤条支持配置多步骤显示形式及步骤容器样式设置

### 10.0.25.0101

二、

步骤条切换按钮位置及动作等功能

三、

步骤条组件支持步骤浮窗相关配置
