Element-ui 步骤条功能拓展——动态生成步骤条

需求：最近在做应急预案的vue页面，需要有上一步、下一步等功能，并且每一个预案都是一个简单流程

题外话：感觉使用vue+Element-ui来做，真的是方便很多很多，思路清晰，代码简洁。

如果是按照以前的写法，肯定是要多个上一步、下一步按钮，并且每个按钮都要用js写相应的click事件。当然最后呈现出来的代码还是要看个人能力的凝练程度。

思路重点：el-steps的active的对应每个步骤要显示的div

1、动态渲染

相关代码

         <div class="cont_middle"><div style="position: relative;top:80px;"><el-steps :active="active" finish-status="success" process-status="finish"><el-step :title="item.title" :description="item.description" :key="item.index" v-for="item in singleStepData"></el-step></el-steps></div><div><div class="cont_middle_progress_content" v-if="active === item.index" v-for="item in singleStepData">{{item.content}}</div></div><div  class="deployBtn" v-if="stepNum != 0"><el-button @click="next"  v-if="active == 0"  round>执行应急预案</el-button><el-button  type="info" round @click="prev" v-if="active != 0 && active != stepNum">上一步</el-button><el-button round @click="next"  v-if="active != 0 && active != lastStep">下一步</el-button><el-button @click="endFunc" v-if="active == lastStep" round>完结</el-button></div><div class="cont_middle_time">{{this.gettime}}</div></div>

2、参数初始化

3、按钮动作

最终效果：

Element-ui 步骤条功能拓展——动态生成步骤条相关推荐

修改element ui tree 搜索功能，实现分级搜索，关键字高亮
element ui 里面的tree 自带的搜索功能是默认搜索的全部数据,有关键字的显示,没有的不显示需求: 在element UI tree 原有功能不变的情况下新加 1)搜索 tree 时,如果 ...
动态生成多条插入语句存入文本文档中
写一个程序,能够动态生成多条插入语句如:insert into MyStudents values("人名1",年龄,'男',分数1,分数2).将生成的插入语句输出到记事本文件 S ...
动态生成多条插入语句
写一个程序,能够动态生成多条插入语句如:insert into MyStudents values("人名1",年龄,'男',分数1,分数2).将生成的插入语句输出到记事本文件 S ...
在Element UI中表格根据数据动态变化显示表格的内容
需求对于Element UI里的表格,如果假设传入data的数据为数字(事实上其他的字母之类的也可)代表为表格的一些固定选项,而不是直接传入字符串,怎样实现替换.比如对于某个表格的选项,传入的数据用 ...
vue + element UI【实战】音乐播放器/语音条（内含音频的加载、控制，事件监听，信息获取，手机网页阴影的去除等技巧）
相关技巧,详见注释 <template><div class="container"><h2>{{ mu ...
Element UI Table组件固定列底部有一条白线的解决方案
bug:在某一次项目中使用暗色系的固定列时发现有一条白线无法消除(之前项目都是亮色系所以没发现问题) 通过排查发现这条白线能够随着el-table__fixed-right元素移动但是却没有任何子元素 ...
element ui表格打印_element ui实现前台打印功能
element ui实现前台打印功能简介在项目中经常会使用打印功能,这次我们来看一下element ui实现打印功能,后台采用springboot作为后台接口方法,后台抽数据就不用看了,大家都明白 ...
动态生成数据后绑定事件
HTML代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta chars ...
用Winfrom动态生成SQL的insert语句
NameHelper类的代码 #region 随机姓名生成器 static string[] _firstName = new string[]{ &quo ...

Element-ui 步骤条功能拓展——动态生成步骤条

Element-ui 步骤条功能拓展——动态生成步骤条相关推荐

最新文章

热门文章