Vue Steps步骤组件用法

//步骤名称-状态
<Steps :active="stepActive" finish-status="success" style="padding: 0 100px;width: 100%;margin: 0 auto">
   <Step v-for="(item, index) in stepList" :key="index" :title="item" icon="el-icon-success" />
</Steps>

//组件内容区
<div class="step-content">
   <component :is="currentStepComponent" ref="component" />
</div>


//底部按钮-上一步-下一步
<el-button type="primary" icon="el-icon-arrow-left" :disabled="stepActive === 0 || saveLoading" @click="prevStep">上一步</el-button>
<el-button type="primary" :disabled="stepActive === stepList.length - 1" @click="nextStep">下一步<i class="el-icon-arrow-right el-icon--right" /></el-button>
<el-button v-if="stepActive === stepList.length - 1" :loading="saveLoading" type="primary" @click="savePage">保存</el-button>

//data里面定义
stepActive: 0, //默认组件状态
componentsList: [
 require('./steps/BaseInfo').default,
 require('./steps/MedicalInfo').default,
 require('./steps/SetlInfo').default,
 require('./steps/DiagnoseInfo').default,
 require('./steps/OperationInfo').default,
 require('./steps/GraveInfo').default
],

computed:{
  currentStepComponent() {
      return this.componentsList[this.stepActive]
  },
  stepList() {
      if (this.$store.getters.medicalType === '1') {
        return ['基础信息', '就医信息', '结算信息', '住院诊断', '手术操作信息', '重症监护信息']
      } else {
        return ['基础信息', '就医信息', '结算信息', '门诊诊断', '手术操作信息']
      }
  },
}
  

 //  上一步
prevStep() {
  if (this.stepActive > 0) this.stepActive--
},
    //  下一步
nextStep() {
      if (this.$store.getters.billingDetail.baseInfo.setlId === '') {
        this.$msgWarning('请先查询结算信息')
      } else {
        this.$refs.component.doNext(() => {
          if (this.stepActive < this.stepList.length - 1) this.stepActive++
        })
      }
},

//子组件
 doNext(callback) {
  // 校验处理
 callback()
},