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

article/2025/9/17 22:19:12

效果图

在这里插入图片描述

一、引入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;}}}