Element-ui 步骤条功能拓展——动态生成步骤条_el-steps动态渲染

需求：最近在做应急预案的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、按钮动作

最终效果：