vue+elementui步骤条设置

1,怎么让步骤条在第二步的时候那个线也变色
2.在回到第一步数据都有时文字依然保持变色,打钩状态

img

img

img


层级 注意设置了scoped 定义样式穿透

.el-step__head.is-success > .el-step__line{
background:red
}

el-steps有个active属性,通过动态的设置active的值,来改变当前激活步骤。监听每一步填写的数据,都有时,将active的值设置为当前步骤的index(第一步index为0,第二步为1,...):

img

<el-steps :active="active" finish-status="success">
  <el-step title="步骤 1"></el-step>
  <el-step title="步骤 2"></el-step>
  <el-step title="步骤 3"></el-step>
</el-steps>


<script>
  export default {
    data() {
      return {
        active: 0
      };
    },

    watch: {
      第一步数据: {
        if (第一步数据都有) this.active = 1;
      },
      ...
    }
  }
</script>