需求:el-form表单有初始的样式,之后点击添加按钮后,出现相同的样式,但是内容是不影响的,并且新添加的样式也会有表单校验
默认表单如下图
点击添加姓名年龄,并且不输入点击提交后如下图
代码我直接全部贴了,需要直接复制粘贴就行,代码量不大,挺好实现的
<template>
<div class="content-box">
<div class="container">
<p>主题页面 1 - 1</p>
<el-row>
<el-col :span="9">
<div class="table-container">
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="form.age"></el-input>
</el-form-item>
<div v-for="(item, index) in form.items" :key="index">
<el-form-item
label="性别"
:prop="'items.' + index + '.sex'"
:rules="{ required: true, message: '性别不能为空', trigger: 'blur' }"
>
<el-input v-model="item.sex"></el-input>
</el-form-item>
<el-form-item label="爱好" :prop="'items.' + index + '.hobby'"
:rules="{ required: true, message: '爱好不能为空', trigger: 'blur' }">
<el-input v-model="item.hobby"></el-input>
</el-form-item>
</div>
<el-form-item>
<template>
<el-button type="primary" @click="addItem">添加姓名年龄</el-button>
<el-button type="primary" @click="submitForm">提交</el-button>
</template>
</el-form-item>
</el-form>
</div>
</el-col>
</el-row>
<div class="pagination-area"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
age: '',
items: [{ sex: '', hobby: '' }]
},
rules: {
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
age: [{ required: true, message: '请输入年龄', trigger: 'blur' }]
}
};
},
created() {},
methods: {
// 添加表单内容操作
addItem() {
this.form.items.push({
name: '',
sex: ''
});
},
// 提交做校验
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
const data = [
{
name: this.form.name,
age: this.form.age
},
...this.form.items.map((item) => ({ sex: item.sex, hobby: item.hobby }))
];
console.log(this.form, '数据结构');
} else {
console.log('表单验证失败');
}
});
},
}
};
</script>
提交后得到的数据结构如下图,根据后端所需结构传入
如果后端需要的数据对象结构,如下这样写就行了
// 提交做校验
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
const data = [
{
name: this.form.name,
age: this.form.age
},
...this.form.items.map((item) => ({ name: item.name, age: item.age }))
];
console.log(data, '数据结构');
} else {
console.log('表单验证失败');
}
});
}
如果要实现复杂表单,比如添加全部一样的,和添加部分一样的一起,可以看我另外一篇文章
文章到此结束,希望对你有所帮助~