Some simple uses of el-steps

 

 

Recently I was writing a vue2+elementui project, and one of the pages used the el-steps component. I would like to share my experience of getting into trouble.

The page is generally a three-step step bar, with three buttons: Previous, Next, and Submit at the bottom.

1. First reference the component in the page, and define active in data to indicate the current step.

 <el-steps :active="active" style="margin:30px 15px 0 15px ">
       <el-step title="第一步"></el-step>
       <el-step title="第二步"></el-step>
       <el-step title="第三步"></el-step>
 </el-steps>

2. Use v-if to control the currently displayed content

Note: When defining active, I used 0 to define it, but the el-steps progress must become completed in the third step, so change the control condition of the div to start from 1.

3. Judgment conditions for bottom buttons

 <el-button >{
   
   { this.active === 0 ? '取消' : '上一步' }}</el-button>
 <el-button @click="next">{
   
   { this.active === 3 ? '提交' : '下一步' }}</el-button>

4. Previous, next, cancel and submit button logic

back() {
      if (this.active === 1) {
         this.$refs['elForm'].resetFields();
          this.$router.go(-1);
      } else {
        this.active--;
      }
     },
next() {
     if (this.active++ > 2) this.active = 3;
  },