elementUI使用步骤条自定义显示内容和显示某一区间段的颜色

需求：在开发中我们经常会遇到需要指定特定节点的内容和区间颜色进行显示的，element-ui官网上面没有给出特定区间自定义颜色，这里我们通过给指定的节点添加类名的方式进行处理指定区间的颜色显示

1，自定义节点的样式具体实现方式如下：

主要就是动态绑定class,然后覆盖element底层的样式

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

css的代码如下：(如果不生效我们这里可以使用穿透实现：less默认是不支持 >>> ，但是可用 /deep/ 和 ::v-deep；scss支持 >>>和::v-deep)

// 蓝色
.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;
         }
     }
 }

2，自定义显示内容主要是借用插槽的方式进行实现（鼠标移入凸显）

html部分：

<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>

js部分如下：

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);
},

css样式部分:

 // 里程碑样式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;
  }
}

参考文章如下：https://blog.csdn.net/CuiCui_web/article/details/106402330