vue使用steps步骤条，自定义内容

效果图

一、引入element ui steps

<el-steps :active="caseHistoryData.length" finish-status="success" direction="vertical" >
   <el-step>
     <template slot="description">
     
     </template>
   </el-step>
</el-steps>

二、在template 写入即可 使用“插槽”

<el-steps :active="caseHistoryData.length" finish-status="success" direction="vertical"> 
   <el-step v-for="(item) in caseHistoryData" :key="item.id">
     <template slot="description">  //利用插槽
       <el-row class="putOnRecord">   //直接写样式代码即可，样式自己调整
         <img src="@/assets/image/提示.png" class="out">  //该图片为 左上角箭头 定位
         <el-row v-show="item.caseNode===1">
           <div class="putOnRecord_p">
             <p>
               {{ item.createTime }}&nbsp;&nbsp;&nbsp;立案信息
             </p>
             <p>
               操作员：{{ item.userName }}
             </p>
           </div>
           <div class="putOnRecordLA">
             <el-row>
               <el-col :span="5">审核人</el-col>
               <el-col :span="5">{{ caseHistoryData[caseHistoryData.length-1].obj.auditUserName||"-" }}</el-col>
               <el-col :span="6">审核时间</el-col>
               <el-col :span="8" style="border-right:none">{{ caseHistoryData[caseHistoryData.length-1].obj.auditTime||"-" }}</el-col>
             </el-row>
             <el-row style="border-top:1px solid #dfe6ec;">
               <el-col :span="5">采集人</el-col>
               <el-col :span="5">{{ caseHistoryData[caseHistoryData.length-1].obj.collectUserName||"-" }}</el-col>
               <el-col :span="6">采集时间</el-col>
               <el-col :span="8" style="border:none">{{ caseHistoryData[caseHistoryData.length-1].obj.collectTime||"-" }}</el-col>
             </el-row>
           </div>
         </el-row>
       </el-row>
     </template>
   </el-step>
 </el-steps>

三、样式代码

& .putOnRecord{
  position: relative;
  margin-bottom: 30px;
  padding:0 20px 20px 20px;
  margin-left: 20px;
  background: #FAFAFA;
  img.out {
      display: inline-block;
      border-width: 0 30px 20px 0;
      border-color: transparent  #FAFAFA;
      border-style:  solid;
      left: -28px;
      top: 0;
      position: absolute;
  }
  & .putOnRecord_p{
     display: flex;
      justify-content: space-between;
      & > p {
        padding: 0;
        line-height: 58px;
        height: 58px;
      }
      & > p:last-child{
        font-family: '兰亭黑简';
        color: #333;
      }
    }
   & .putOnRecordLA{
      background: #fff;
       border: 1px solid #dfe6ec;
       border-radius:4px;
       & .el-col{
         padding-left:16px;
         height: 38px;
         line-height: 38px;
         font-size: 14px;
         color: #333333;
         font-family: '兰亭黑简';
       }
       & .el-col-5 , .el-col-6{
         border-right: 1px solid #dfe6ec;
       }
     }
 }

样式 随便写的