elementui的步骤条制作（error和success两种状态切换）

<div class="flexBox">
          <div class="elsteps">
            
             <el-steps :active="item.activeStep" finish-status="error"  v-if="item.status===2||item.status===5||item.status===8" :key='index'>
               <el-step :title="item.activeStep===1&&item.status===2?'审核失败':'已审核'">el-step>
              <el-step :title="item.activeStep===0||item.activeStep===1?'待支付':'已支付'">el-step>
              <el-step :title="item.activeStep===3?'邀约失败':'待访问'">el-step>
              <el-step title="待认证">el-step>
              <el-step title="待处理">el-step>
              <el-step title="完成">el-step>
            el-steps>
            
            <el-steps :active="item.activeStep" finish-status="success" 
            v-else>
              <el-step :title="item.activeStep===0?'待审核':'已审核'">el-step>
              <el-step :title="item.activeStep===0||item.activeStep===1?'待支付':'已支付'">el-step>
              <el-step :title="item.activeStep===0||item.activeStep===1||item.activeStep===2?'待访问':item.activeStep===3?'已邀约':'已访问'">el-step>
              <el-step :title="item.activeStep===0||item.activeStep===1||item.activeStep===2?'待认证':item.activeStep===3?'认证中':'已认证'">el-step>
              <el-step :title="item.activeStep===0||item.activeStep===1||item.activeStep===2||item.activeStep===3||item.activeStep===4?'待处理':'已处理'">el-step>
              <el-step :title="item.activeStep===0||item.activeStep===1||item.activeStep===2||item.activeStep===3||item.activeStep===4?'完成':'已完成'">el-step>
            el-steps>
           
          div>
          <div
            v-if="item.status === 2 || item.status === 5 || item.status === 8"
            class="reason"
            :title="item.reason"
          >
            <span>失败原因span>:{{ item.reason }}
          div>
          <div v-if="item.status !== 13">
            <span>访问时间span>:{{ formatDate(item.startTime) }}
          div>
        div>

getOrderList() {
            let params = {
                current: this.currentPage,
                rowCount: this.pageSize,
                row:{
                    status: this.status,//不同状态获取到的数据 步骤条也不同
                }
            }
            orderList(params).then(res=>{
                if(res.result&&res.rows){
                    res.rows.forEach((item,index) => {
                        if(item.status===0){//待审核
                            // 待审核（标黄）-待支付（标灰）-待访问（标灰）-待认证（标灰）-待处理（标灰）-完成（标灰）
                            item.activeStep=0
                        }
                        else if(item.status===3){//待支付
                            // 已审核（标绿）-待支付（标黄）-待访问（标灰）-待认证（标灰）-待处理（标灰）-完成（标灰）
                            item.activeStep=1
                        }
                        else if(item.status===6||item.status===7){//待访问 邀约成功
                            // 已审核（标绿）-已支付（标绿）-待访问（标黄）-待认证（标灰）-待处理（标灰）-完成（标灰）
                            item.activeStep=2
                        }
                        else if(item.status===9){//认证中
                            // 已审核（标绿）-已支付（标绿）-已邀约（标绿）【显示邀约时间】-认证中（标黄）-待处理（标灰）-完成（标灰）
                            item.activeStep=3
                        }else if(item.status===11||item.status===12){//待处理 待处理审核
                            // 已审核（标绿）-已支付（标绿）-已访问（标绿）【显示邀约时间】-已认证（标绿）-待处理（标黄）-完成（标灰）
                            item.activeStep=4
                        }else if(item.status===13){
                            item.activeStep=6 //为已完成时 直接为6 跳过5 （5时标黄 过了5 就是绿）
                        }
                        // 失败的 activeStep 和成功的 重复（因为成功和失败的步骤都是在同一个步骤中 所以activeStep 要是一样的） 所以要加key 保证 会刷新重新加载 ---（特别重要 key 值 去更新页面）
                        else if(item.status===2){
                            item.activeStep=1

                        }else if(item.status===8){
                            item.activeStep=3
                        }
                       
                    });
                    this.orderList =JSON.parse(JSON.stringify(res.rows))
                    this.total= res.total
                }
            }).catch(err=>{
                console.log('error',err)
            })
        },
        // 搜索
        searchClick(){
            this.getOrderList()
        },

/* 将进行中 和未开始的 步骤条 样式*/
.myOrder .listInfoBox .flexBox .elsteps /deep/ .el-step__head.is-process{
    color: #ffec43;
    border-color: #ffec43;
    box-sizing: border-box;
    height: 24px;
}
.myOrder .listInfoBox .flexBox .elsteps /deep/ .el-step__head.is-wait{
    height: 24px;
}
.myOrder .listInfoBox .flexBox .elsteps /deep/ .el-step__head.is-process .el-step__icon.is-text .el-step__icon-inner,
.myOrder .listInfoBox .flexBox .elsteps /deep/ .el-step__head.is-wait .el-step__icon.is-text .el-step__icon-inner{
    display: none;
}
.myOrder .listInfoBox .flexBox .elsteps /deep/ .el-step__head.is-process .el-step__icon.is-text ,
.myOrder .listInfoBox .flexBox .elsteps /deep/ .el-step__head.is-wait .el-step__icon.is-text {
    border: 6px solid;
}
/* 修改 完成 成功 失败样式 */
.myOrder .listInfoBox .flexBox .elsteps /deep/ .el-step__head.is-success .el-step__icon.is-text{
    border:12px solid;
}
.myOrder .listInfoBox .flexBox .elsteps /deep/ .el-step__head.is-success .el-step__icon.is-text .el-icon-check:before{
    color:#fff;
}
.myOrder .listInfoBox .flexBox .elsteps /deep/ .el-step__head.is-success .el-step__line{
    background: #339933;
}
.myOrder .listInfoBox .flexBox .elsteps /deep/ .el-step__head.is-error .el-step__icon.is-text{
    border:12px solid;
}
.myOrder .listInfoBox .flexBox .elsteps /deep/ .el-step__head.is-error .el-step__icon.is-text .el-icon-close:before{
    content:'!' !important;
    color:#fff;
}
.myOrder .listInfoBox .flexBox .elsteps /deep/ .el-step .el-step__main .el-step__title{
    font-size: 12px !important;
}

功能描述 切换 订单状态 后 点击 搜索按钮 查询


根据数据 去渲染 步骤条的