elementUI Steps 步骤条样式修改

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>