如何动态更改el-step的图标状态

这是官网的状态步骤条案例,当我们的步骤条需要进行是与否的判断状态展示时,就会需要展示这样的状态

如何根据状态值更改el-step中的icon与title的颜色,有以下几个步骤:

1.去掉案例中的finish-status: success,这是设置了步骤成功状态默认显示为绿色,去掉之后我们才能自定义

2.自定义icon和title需要slot的方式来进行属性的设置

<el-steps :active="active" align-center>
   <el-step v-for="(item, index) in decisionList" :key="index">
      //icon的插槽使用
      <i v-if="item.isagree == 1" class="el-icon-check" slot="icon"></i>
      <i v-if="item.isagree == 0" class="el-icon-close" slot="icon"></i>
      //title的插槽使用
      <template slot="title">
         <div style="color: #c0c4cc;;" v-if="item.isagree == null">{{item.title}}</div>
         <div style="color: #586cb1;" v-if="item.isagree == 1">{{item.title}}</div>
         <div style="color: red;" v-if="item.isagree == 0" >{{item.title}}</div>
      </template>
      //描述内容的插槽使用
      <template slot="description">
          <div style="color: #c0c4cc;" v-if="item.isagree == null">待确认</div>
          <div style="color: #586cb1;" v-if="item.isagree == 1">已通过</div>
          <div style="color: red;" v-if="item.isagree == 0">未通过</div>
      </template>
   </el-step>
</el-steps>

3.改变进度条的颜色

关键代码:给每个el-step添加动态class,根据需求进行自定义

完整代码:

<el-steps :active="active" align-center>
   <el-step v-for="(item, index) in decisionList" :key="index"
        :class="item.isagree == 1 ? 'itemsetep' : (item.isagree == 0 ? 'itemError' : '')" >
      //icon的插槽使用
      <i v-if="item.isagree == 1" class="el-icon-check" slot="icon"></i>
      <i v-if="item.isagree == 0" class="el-icon-close" slot="icon"></i>
      //title的插槽使用
      <template slot="title">
         <div style="color: #c0c4cc;;" v-if="item.isagree == null">{{item.title}}</div>
         <div style="color: #586cb1;" v-if="item.isagree == 1">{{item.title}}</div>
         <div style="color: red;" v-if="item.isagree == 0" >{{item.title}}</div>
      </template>
      //描述内容的插槽使用
      <template slot="description">
          <div style="color: #c0c4cc;" v-if="item.isagree == null">待确认</div>
          <div style="color: #586cb1;" v-if="item.isagree == 1">已通过</div>
          <div style="color: red;" v-if="item.isagree == 0">未通过</div>
      </template>
   </el-step>
</el-steps>


.itemsetep {
  .el-step__line {
    background-color: #586CB1!important;
  }
  .el-step__icon.is-text {
    border-color: #586CB1!important;
  }
}

.itemError {
  .el-step__line {
    background-color: #586CB1!important;
  }
  .el-step__icon.is-text {
    border-color: red!important;
  }
}

完成!!(因为忽略了finish-status的设置没找到icon不成功的原因费了好多时间,还是要多看看官方文档)