element ui 实现 分步表单

方法一：

<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
    }
  }
}