动态增减表单项及其涉及到的表单嵌套校验
效果展示：
对于整个表单的验证，可以在el-form中使用:rules='rules’进行整体校验，而进行了嵌套的表单项可以单独给他一套校验规则，如下：
动态新增表单项时，为了避免出现prop取值重复，需要对prop的取值进行一些规则性改动
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="../vue/vue.js"></script>
<!-- 引入样式 -->
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title>动态增减表单项及其涉及到的表单嵌套校验</title>
<style>
.el-input__inner {
width: 250px;
}
</style>
</head>
<body>
<div id="app">
<template>
<div>
<el-form
:model="queryForm"
ref="queryForm"
label-width="100px"
:rules="rules"
>
<el-form-item prop="email" label="邮箱">
<el-input
v-model="queryForm.email"
placeholder="请输入邮箱"
></el-input>
</el-form-item>
<div v-for="(item,index) in queryForm.nameList" :key="index">
<el-form-item
:prop="'nameList.'+index+'.name'"
:label="'人员姓名'+(index+1)"
:rules="nameRules"
>
<el-input
v-model="item.name"
placeholder="请输入姓名"
style="display: inline"
></el-input>
<el-button
@click.prevent="remove(item)"
style="display: inline-block"
>删除</el-button
>
</el-form-item>
</div>
<el-form-item>
<el-button type="primary" @click="submitForm('queryForm')"
>提交</el-button
>
<el-button @click="resetForm('queryForm')">重置</el-button>
<el-button @click="add">新增人员</el-button>
</el-form-item>
</el-form>
</div>
</template>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
queryForm: {
email: "",
nameList: [{
name: "", key: Date.now() }],
},
rules: {
email: [
{
required: true,
message: "请输入邮箱地址",
trigger: "blur",
},
{
type: "email",
message: "请输入合理的邮箱地址",
trigger: ["blur", "change"],
},
],
},
nameRules: [
{
required: true, message: "请填写姓名", trigger: "blur" },
],
};
},
methods: {
// 表单提交
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log("submit!", this.queryForm);
} else {
console.log("error submit!!");
return false;
}
});
},
// 重置表单
resetForm(formName) {
this.$refs[formName].resetFields();
},
// 添加人员
add() {
this.queryForm.nameList.push({
name: "",
key: Date.now(),
});
},
// 删除人员
remove(item) {
var index = this.queryForm.nameList.indexOf(item);
if (index !== -1) {
this.queryForm.nameList.splice(index, 1);
}
},
},
});
</script>
</body>
</html>