elementUI步骤条自定义显示内容，自定义条件显示某一区间段的颜色 （鼠标移入凸显）

elementUI步骤条可以自定义显示的内容，如下图：


自定义显示内容主要是借用插槽的方式进行实现
结构部分：

<div style="width: 40%;background: #fff;padding:20px; ">
      <el-steps class="hoverSteps" direction="vertical" :space="80" :active="1">
        <el-step v-for="(value, key) in list">
          <template slot="description">
              <div @mouseover="mouseOver(key)"
                   @mouseleave="mouseLeave(key)" :id="key">
                   <div class="stepNoBtn" :class="current===key? 'stepBtn':''">
                      <div class="step-title-font">{{ value.title }}</div>
                    <div>{{value.description}}</div>
                    <div class="btnPosition">
                      <ai-button v-if="current===key" size="mini" type="primary">处理</ai-button>
                    </div>
                   </div>
            </div>
          </template>
        </el-step>
      </el-steps>
    </div>

数据定义部分

list:[
          {
            title:'完成高优先级需求及问题的研发、测试及上线',
            description:'2020-04-20',
            status:0 // 判断是否有按钮及盒子凸显，例子中0代表不凸显无按钮。 具体情况可自行判断
          },
          {
            title:'完成中优先级需求及问题的研发、测试及上线',
            description:'2020-05-31',
            status:1
          },
          {
            title:'完成中低先级需求及问题的研发、测试及上线',
            description:'2020-05-31',
            status:0
          }
        ]

鼠标移入移出事件

mouseOver(val){
   this.current = val
   this.hoverData[val] = true
   console.log(this.hoverData)
   console.log(this.hoverData[val]===true);
 },
  mouseLeave(val){
    this.current = null
    this.hoverData[val] = false
    console.log(this.hoverData[val]===true);
 },

样式部分：

 // 里程碑样式begin
  //里程碑样式
  .hoverSteps{
    /deep/ .ai-step__description{
      padding-right:0 !important;
    }
  }
  .stepNoBtn{
    padding:12px 12px;
    box-sizing: border-box;
    margin-bottom:10px;
    .step-title-font{
      font-size:14px; font-weight: bold;;
    }
  }
  .stepBtn{
    box-sizing: border-box;
    background: #fff;
    /*width: 90%;*/
    border-radius: 4px;
    border: 1px solid #ebeef5;
    line-height: 1.4;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    word-break: break-all;
    .btnPosition{
      text-align: right;
    }
  }
  // 里程碑样式end

也可以自定义步骤条哪些步骤的样式，具体判断可以自定义，如下图：

这张图是放入表格中的某一列，默认只显示3步。不过可以看到是根据不同的条件，动态显示色彩
这种方式，主要就是动态绑定class,然后覆盖element底层的样式
html部分：

<el-steps  :active="list.milepostRow.milepostActive" >
    <!--      :class=" key<2? 'key1':(key>=2 && key<4 ? 'key2' : 'key3') "          -->
    <el-step  v-for="(value, key) in list.milepostRow.mileposts"
              :title="value.title"
              :class="value.color"
              @click.native="on_click(key+1)"
              :description="value.description" >
 	</el-step>
</el-steps>

在这里呢，是在字段color中进行了判断，直接返回终得类名，key1,key2,key3
你也可以用三目运算进行设置，如下：
class=" key<2? 'key1':(key>=2 && key<4 ? 'key2' : 'key3') "

具体的逻辑判断，自定设置即可。
css部分

 // 蓝色
        .el-step.is-horizontal.key1{
            .el-step__icon.is-text{
                background: #409eff;
                color:#fff;
            }
            .el-step__head{
                border-color:#409eff;
            }
            .el-step__main{
                .ai-step__title,.el-step__description {
                    color:#409eff;
                }
            }
        }
        // 黑色
        .el-step.is-horizontal.key2{
            .el-step__icon.is-text{
                color:#303133;
            }
            .el-step__head{
                border-color:#303133;
            }
            .el-step__main{
                .el-step__title,.el-step__description {
                    color: #303133;
                }
            }
        }
        // 灰色
        .el-step.is-horizontal.key3{
            .el-step__icon.is-text{
                color:#C0C4CC;
            }
            .el-step__head{
                border-color:#C0C4CC;
            }
            .el-step__main{
                .ai-step__title,.el-step__description{
                    color:#C0C4CC;
                }
            }
        }

上述两种方式也可以结合在一起使用。具体情况根据具体需求实现即可。
之前还写过一篇文章仅仅只是改造以下步骤条的样式
链接如下：
https://blog.csdn.net/CuiCui_web/article/details/100041704
效果图如下：