如何使用Element-UI的Steps步骤条组件实现工作流可视化流程

作者 : 开心源码 本文共769个字,预计阅读时间需要2分钟 发布时间: 2022-05-12 共216人阅读

工作流引擎在Web可视化开发的主要体现形式是步骤条,步骤条直观反应工作流的节点、流向以及进度。那么,如何在Web可视化开发时快速实现一种浅显、简洁且易操作的步骤条呢?Element-UI不仅为前台开发人员提供一套丰富的API,也为需求人员提供了一种原型设计工具,Element-UI直接提供Steps步骤条组件,方便开发人员实现工作流引擎在Web展现时要求的步骤条,可以帮助Web开发人员专注于业务流程的实现,而不是耗费大量精力关注步骤条具体实现。本文将主要详情如何使用Element-UI的Steps步骤条组件实现工作流可视化流程。

Element-UI组件Steps步骤条可以引导客户按照流程完成任务的分布导航条,可根据实际应用场景设定步骤,且步骤不得少于2步。具体实现代码如下图所示:

实现代码

Steps步骤条的引入是在template中加入el-steps和el-step元素,每一个el-step元素表明是步骤流程中的一个节点,通过title属性设置节点名称,例如设置申请、审核、批准等名称。

而后,在data中定义active属性,类型为Number,默认设置值为0,表示将步骤索引是0的节点激活。

那么,如何动态变换工作流引擎进度状态呢?进度状态表现在Steps步骤条组件节点状态的变化,也即active属性数值的变化。因而,通过编写代码实现对active数值的控制,就可实现对工作流引擎节点状态的变化控制。

另外,Steps步骤条组件既可以提供横向流向的步骤条,还可以提供竖直流向的步骤条。当要求竖式步骤条时,只要要在el-steps元素中设置direction属性为vertical就可。如下图所示:

属性设置

按照以上步骤,Steps步骤条组件可轻松实现诸如申请、审核、批准等工作流业务流程状态展现。具体呈现效果如下图所示:

具体呈现

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 如何使用Element-UI的Steps步骤条组件实现工作流可视化流程

发表回复