方法一：
<template><div class="main-container"><el-card :body-style="{ padding: '20px' }" shadow="hover"><el-steps:active="activeStep"align-centerfinish-status="success"class="steps-wrapper"><el-step title="企业信息" description="" /><el-step title="添加印章" /><el-step title="备案材料" /><el-step title="制作印章" /></el-steps></el-card><el-card :body-style="{ padding: '5px' }" shadow="hover" class="margin-top-xs"><div class="title text-center padding"><el-link type="primary" :underline="false" class="text-xxl" /></div><Firmv-if="activeStep === 1":firm-info="FirmInfo":order-info="OrderInfo"@next-step="next"/><AddSealv-if="activeStep === 2":firm-info="FirmInfo":order-info="OrderInfo"@next-step="nextTo"@pre-step="preTo"/><RecordMessagev-if="activeStep === 3":firm-info="FirmInfo":order-info="OrderInfo"@next-step="nextTo"@pre-step="preTo"/><MakeSealv-if="activeStep === 4":firm-info="FirmInfo":order-info="OrderInfo"@pre-step="preTo"/></el-card></div>
</template><script>
import Firm from './addSealStep/Firm.vue'
import AddSeal from './addSealStep/AddSeal/AddSeal'
import RecordMessage from './addSealStep/record-message.vue'
import MakeSeal from './addSealStep/makeSeal/make-seal.vue'
export default {name: 'Addseal',components: { Firm, AddSeal, RecordMessage, MakeSeal },data() {return {activeStep: 1,FirmInfo: {},OrderInfo: {},Id: ''}},watch: {activeStep(newVal, oldVal) {}},mounted() {if (this.$route.query.activeStep) {this.activeStep = Number(this.$route.query.activeStep)}},methods: {next(FirmInfo) {if (this.activeStep === 1) {this.FirmInfo = FirmInfothis.activeStep += 1}},nextTo(id) {this.activeStep += 1},preTo(id) {this.activeStep -= 1},}
}
</script><style lang="scss" scoped>
::v-deep .el-step__title {font-size: 14px;
}
@media screen and (max-width: 768px) {.steps-wrapper {width: 100%;margin: 0 auto;}
}
@media screen and (min-width: 768px) {.steps-wrapper {width: 100%;margin: 0 auto;}
}
</style>
方法二：
如何利用vue和Element-plus实现分步表单和表单校验-撸码网 (yingnd.com)
// StepperForm.vue
<template><div class="stepper-form"><el-steps :active="activeStep" space="150px"><el-step title="基本信息"></el-step><el-step title="联系方式"></el-step><el-step title="其他信息"></el-step></el-steps><component :is="currentStep"></component><div class="button-group"><el-button @click="prevStep" :disabled="activeStep === 0">上一步</el-button><el-button @click="nextStep" :disabled="!validForm || activeStep === stepLength - 1">下一步</el-button></div></div>
</template>
<script>
import BasicInfoForm from './BasicInfoForm.vue'
import ContactForm from './ContactForm.vue'
import OtherForm from './OtherForm.vue'
export default {name: 'StepperForm',components: {BasicInfoForm,ContactForm,OtherForm},data() {return {activeStep: 0, // 当前处于哪个步骤stepLength: 3 // 总步骤数}},computed: {currentStep() {switch (this.activeStep) {case 0: return 'BasicInfoForm'case 1: return 'ContactForm'case 2: return 'OtherForm'}},validForm() {switch (this.activeStep) {case 0: return this.$refs.basicInfoForm.validate()case 1: return this.$refs.contactForm.validate()case 2: return this.$refs.otherForm.validate()}}},methods: {nextStep() {if (this.validForm) {this.activeStep += 1}},prevStep() {this.activeStep -= 1}}
}
)
