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

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

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

 

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

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

1、动态渲染

Element-ui 步骤条功能拓展——动态生成步骤条_第1张图片

相关代码

         
{{item.content}}
执行应急预案 上一步 下一步 完结
{{this.gettime}}

2、参数初始化

Element-ui 步骤条功能拓展——动态生成步骤条_第2张图片

3、按钮动作

Element-ui 步骤条功能拓展——动态生成步骤条_第3张图片

最终效果:

Element-ui 步骤条功能拓展——动态生成步骤条_第4张图片

你可能感兴趣的:(Element,VUE,vue,element-ui,el-step,步骤流程)