el-step中多个步骤中的表单一起提交

如图，三个步骤中的所有表单，要一起提交；

那么每个步骤的表单信息 要拼接在一起 ，最后一起提交

对象拼接

this.form = Object.assign(this.form,data);

home.vue

<template>
  <div class="home">
    <el-steps :active="active" finish-status="success">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
    </el-steps>
    <Step1 @getnext='getnext' v-if='active==1' />
    <Step2 v-if='active==2' @getnext='getnext'/>
    <Step3 v-if='active==3' :lastform='form'/>

  </div>
</template>

<script>
import Step1 from "./components/step1.vue";
import Step2 from "./components/step2.vue";
import Step3 from "./components/step3.vue";
export default {
  name: "Home",
  components: {
    Step1,
    Step2,
    Step3,
  },
  data() {
    return {
      active: 1,
      form:{}
    };
  },
  methods: {
    getnext(ac, data) {
      console.log(ac, data, "0000");
      this.active = ac;
      if(data) {
        this.form = Object.assign(this.form,data);
        console.log(this.form,'this.form')
      }
    },
  },
};
</script>

step.vue

<template>
  <div>
    <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name" tabindex='1'></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-input v-model="ruleForm.gender" tabindex='-1'></el-input>
      </el-form-item>
      <el-form-item label="abc" prop="abc">
        <el-input v-model="ruleForm.abc" tabindex='2'></el-input>
      </el-form-item>
      <el-form-item>
          <el-button @click="next">下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "AdminBetterStep1",

  data() {
    return {
      ruleForm: {
        name: "",
        gender: "",
        abc: "",
      },
      rules: {},
    };
  },

  mounted() {},

  methods: {
      next() {
          this.$emit('getnext',2,this.ruleForm)
      }
  },
};
</script>

<style lang="scss" scoped>
</style>

step2.vue

<template>
    <div>
            <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活动名称" prop="ddd">
        <el-input v-model="ruleForm.ddd" tabindex='1'></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="eee">
        <el-input v-model="ruleForm.eee" tabindex='-1'></el-input>
      </el-form-item>
     
      <el-form-item>
          <el-button @click="next">下一步</el-button>
      </el-form-item>
    </el-form>
    </div>
</template>

<script>
export default {
    name: 'AdminBetterStep2',

    data() {
        return {
             ruleForm: {
        ddd: "",
        eee: "",
       
      },
      rules: {},
        };
    },

    mounted() {
        
    },

    methods: {
         next() {
          this.$emit('getnext',3,this.ruleForm)
      }
    },
};
</script>

<style lang="scss" scoped>

</style>

step3.vue

<template>
  <div>
    1:{{lastform.name}}<br />
    2:{{lastform.gender}}<br />
    3:{{lastform.abc}}<br />
    4:{{lastform.ddd}}<br />
    5:{{lastform.eee}}<br />

  </div>
</template>

<script>
export default {
  name: "AdminBetterStep3",
  props: {
    lastform: {
      type: Object,
    },
  },
  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
</style>

补充：多个对象拼接使用Object.assign(form1.form2)

也可使用 {...obj1,...obj2}