1.修改前的效果
2.修改后的效果
2.实现代码
<template>
<el-steps :active="active" align-center>
<template v-for="item in arrData">
<el-step :key="item.id" :title="item.name" :class="item.isSelected ? 'active' : ''"></el-step>
</template>
</el-steps>
</template>
<script>
export default {
return {
arrData: [
{
id: 0,
name: "process1",
isSelected: true,
},
{
id: 1,
name: "process2",
isSelected: false,
},
{
id: 2,
name: "process3",
isSelected: false,
},
],
}
}
</script>
<style>
.active::v-deep .el-step__icon {
background: #67c23a; //被选中时小圆点的颜色
}
::v-deep .el-step__icon {
border: none;
background: #cccccc; //不被选中时小圆点的颜色
}
::v-deep .el-step__title.is-finish{
color: #67c23a; //被选中时的title文字颜色
}
::v-deep .el-step__head.is-finish {
border-color: #67c23a; //steps中选中之后的线的颜色
}
::v-deep .el-step__icon-inner {
display: none; //去掉小圆点中的文字
}
<style>