el-step中多个步骤中的表单一起提交
如图,三个步骤中的所有表单,要一起提交;那么每个步骤的表单信息 要拼接在一起 ,最后一起提交对象拼接this.form = Object.assign(this.form,data);home.vue<template><div class="home"><el-steps :active="active" finish-status="success"><
·
如图,三个步骤中的所有表单,要一起提交;
那么每个步骤的表单信息 要拼接在一起 ,最后一起提交
对象拼接
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}
更多推荐
已为社区贡献5条内容
所有评论(0)