elementui表单结构多层嵌套时,对应写法可以参考如下进行修改
上代码:
<template>
<el-form :model="formWrapper" :rules="rules" ref="formRef">
<el-button @click="addUser">添加用户</el-button>
<div v-for="(item, index) in formWrapper.users" :key="index">
<el-row :gutter="20">
<el-col :span="12" :offset="0">
<el-form-item :prop="'users[' + index + '].name'" label="姓名">
<el-input v-model="item.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="12" :offset="0">
<el-form-item :prop="'users[' + index + '].age'" label="年龄">
<el-input type="number" v-model="item.age"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<el-form-item>
<el-button type="primary" @click="onSubmit">Submit</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
formWrapper: {
users: []
},
rules: {}
};
},
created() {
},
methods: {
addUser() {
this.formWrapper.users.push({
name: '',
age: ''
});
this.generateRules();
},
generateRules() {
this.formWrapper.users.forEach((item, index) => {
this.$set(this.rules, `users[${index}].name`, [
{ required: true, message: 'Name is required', trigger: 'blur' }
]);
this.$set(this.rules, `users[${index}].age`, [
{ required: true, message: 'Age is required', trigger: 'blur' },
{ type: 'number', message: 'Age must be a number', trigger: 'blur' }
]);
});
},
onSubmit() {
this.$refs.formRef.validate((valid) => {
if (valid) {
alert('Submit success!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
};
</script>