方法一:
<template>
<div class="main-container">
<el-card :body-style="{ padding: '20px' }" shadow="hover">
<el-steps
:active="activeStep"
align-center
finish-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>
<Firm
v-if="activeStep === 1"
:firm-info="FirmInfo"
:order-info="OrderInfo"
@next-step="next"
/>
<AddSeal
v-if="activeStep === 2"
:firm-info="FirmInfo"
:order-info="OrderInfo"
@next-step="nextTo"
@pre-step="preTo"
/>
<RecordMessage
v-if="activeStep === 3"
:firm-info="FirmInfo"
:order-info="OrderInfo"
@next-step="nextTo"
@pre-step="preTo"
/>
<MakeSeal
v-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 = FirmInfo
this.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
}
}
}