vue+element步骤条小案例实现

一、效果展示

二、代码示例

代码如下（示例）：

<template>
  <div id="container_id">
    <el-steps class="steps_all" :active="active" simple>
      <el-step v-for="item in stepCount" :key="item" :title="'步骤'+item"></el-step>
    </el-steps>


    <div v-for="item in dataList">
      <div v-if="active===item.id">{{item.content}}</div>
    </div>
    <el-button type="primary" size="mini" style="margin-top: 12px;" @click="stepUp">上一步</el-button>
    <el-button type="primary" size="mini" style="margin-top: 12px;" @click="next">下一步</el-button>
    <el-button type="primary" size="mini" style="margin-top: 12px;" @click="next">保存</el-button>
  </div>

</template>

<script>
export default {
  data() {
    return {
      active: 1,
      stepCount: 4,
      dataList: [
        {
          id: 1,
          content: '1'
        },
        {
          id: 2,
          content: '2'
        },
        {
          id: 3,
          content: '3'
        },
        {
          id: 4,
          content: '4'
        }
      ]
    };
  },

  methods: {
    next() {
      if (this.active < this.stepCount)
        this.active++
    },
    stepUp() {
      if (this.active > 1)
        this.active--
    }
  }
}
</script>
<style scoped>
#container_id {
  height: calc(100% - 10px) !important;
}

#container_id .steps_all {
  margin-top: 10px;
  background-color: WhiteSmoke;
  border-radius: 20px;
}
</style>