elementUI步骤条样式改造

关注

原创最新推荐文章于 2026-02-16 00:27:49 发布 1.4w 阅读 AI 写同款· GEO 优化 ›

前端领域：ElementUI 步骤条的动态更新本文旨在帮助前端开发者理解并掌握ElementUI步骤条组件的动态更新机制。我们将覆盖从基础使用到高级动态控制的全方位知识，包括：本文将按照概念解释、原理分析、实现步骤、实战案例和进阶思考的顺序展开，确保读者能够循序渐进地掌握相关知识。想象你正在网上订购一杯奶茶。这个过程通常分为几个步骤：选择饮品、选择配料、确认订单、支付、完成。网站会用一个进度条显示你当前所处的步骤，这就是步骤条(Steps)组件的典型应用场景。当你在不同步骤间切换时，这个进度条会动态更新，直观地反映你的进度。本文将揭示如何实现这种流畅的阅读详情

修改的效果图如上。下面详细介绍修改的步骤。（通过动态添加类名的方式改进样式）

结构部分

<el-steps :active="milepostActive" >
  <el-step v-for="(value, key) in milepost"
           :class="milepostActive== key+1 ? stepActive: '' "
           :title="value.title"
           :description="value.description">
  </el-step>
</el-steps>

数据定义部分（data）

data () {
  return {
    // 数组对象
    milepost: [
      {title: '项目策划', description: '2019.1.1'},
      {title: '立项', description: '2019.3.1'},
      {title: '需求', description: '2019.5.1'},
      {title: '开发', description: '2019.7.1'},
      {title: '测试', description: '2019.9.1'},
      {title: '发布', description: '2019.11.1'},
      {title: '结项', description: '2019.12.31'},
    ],
    // 默认步骤数
    milepostActive: 5,
    // 动态添加类名
    stepActive: 'stepActive'
  }
},

样式部分

<style lang="scss">
 .el-step.is-horizontal.stepActive{
   .el-step__head.is-finish{
     .el-step__line{
       // 当前步骤数横线样式设置
       .el-step__line-inner{
         width: 50% !important;
         border-width: 1px !important;
       }
     }
     // 当前步骤数圆圈样式设置
     .el-step__icon.is-text{
       background: #409eff;
       color:#fff;
     }
   }
 }
</style>

收录于