elementui步骤条如何修改样式，让左右两端都显示一根线（步骤条数据是动态的）？？

Question

实现如图所示的效果

<template>
  <div class="flex-box">
    <div class="steps-box">
      <el-steps :active="active" align-center finish-status="success">
        <el-step>
          <i slot="icon" class="el-icon-remove-outline"></i>
          <span slot="title">培训计划</span>
        </el-step>
        <el-step>
          <i slot="icon" class="el-icon-remove-outline"></i>
          <span slot="title">线上任务</span>
        </el-step>
        <el-step>
          <i slot="icon" class="el-icon-remove-outline"></i>
          <span slot="title">学员设置</span>
        </el-step>
        <el-step>
          <span slot="title">完成</span>
          <i slot="icon" class="el-icon-remove-outline"></i>
        </el-step>
      </el-steps>
      <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
    </div>
  </div>
</template>

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

  methods: {
    next() {
      if (this.active++ > 3) {
        this.active = 0;
      }
    }
  },
  mounted() {

  },

}
</script>

<style lang="less" scoped>
.flex-box{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  .steps-box{
    margin-top: 100px;
    width: 60%;
    position: relative;
  }
  /deep/.el-step__head.is-success{
    color:#3054ae !important;
    border-color:#3054ae !important;
  }
  /deep/.el-step__title.is-success{
    color: #cccccc;
  }
}

</style>
<style lang="less">
.el-step:last-of-type .el-step__line{
  display: block !important;
}
.el-step__title{
  position: relative !important;
  top: -60px !important;
}

</style>

Answer 1

是这样的效果么，我简单实现了下，希望可以帮到你
思路：

第一步：给步骤条包裹一个容器
第二步：设置这个容器的 after 、before 来实现

// 再进度条外面包裹一个容器 并设置这个容器的 after 、before 伪类
<div class="steps_warp">
  <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>
</div>

// 下面是样式部分
.steps_warp{
    width: 500px;
    margin: 100px auto;
    position: relative;
  }
  .steps_warp::after{
    content:'';
    width: 200px;
    border: #C0C4CC solid 1px;
    position:absolute;
    top:9px;
    left:-200px;
  }
  .steps_warp::before{
    content:'';
    width: 200px;
    border: #C0C4CC solid 1px;
    position:absolute;
    top:9px;
    right: -180px;
  }

第二种方法

这中是修改组件内部样式方法，你可以试下

这个样式主要是将步骤里面的 icon图标居中

/* 这个样式主要是将步骤里面的 icon图标居中 */
.el-step__head{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 这个样式主要是将步骤中最后一个图标的线条显示出来，因为原来的组件是不显示最后一步的线条 */
.el-step:last-of-type .el-step__line{
  display: block;
  width: 100%;
}

截止到目前为止样式是这个的 如图：

接下来需要使用 js 代码将下图中的类名删除 如图：

放假时间 没有更新 下面是根据你的代码实现

根据你的代码实现的

第一步：先将横线的left 和 right设为 0%

第二步：将横线的相关类名 由隐藏 none设为显示 block

第二步：完美显示

.el-step__title{
    position: relative !important;
    top: -60px !important;
  }
  .el-step.is-center .el-step__line{
    left: 0;
    right: 0;
  }
  .el-step:last-of-type .el-step__line{
    display: block;
  }

剩余的一些点击动效根据原有的行内样式改下就行