问题形容
在我的项目开发中,咱们常常会遇到表单保留的性能,在表单保留前,经常须要做表单必填项的校验,校验通过当前才去发申请保留表单数据。
然而,这个表单如果是动静的,即:能够新增雷同的表单。比方这个表单有输入框和下拉框须要校验,点击增加表格按钮,再新增一个雷同的表单,同样新的这个表单对应的输入框和下拉框也须要校验。
本文记录一下对应代码写法思路,咱们先看一下效果图:
效果图
代码思路
- 表单的主数据是要写成对象模式 :model=”ruleForm” 不过既然是要动静的,必定是要循环呢,所以,能够写成这样:
ruleForm: {
// 动静循环项数组
formItemArr: [
{
name: "",
gender: "",
},
],
},
- 点击增加表格的时候,就能够间接 push 对应项就行啦,即,这样:
// 增加一个表格
addForm() {
let itemObj = {
name: "",
gender: "",
};
this.ruleForm.formItemArr.push(itemObj);
},
- 重点来喽,因为是循环的,所以 prop 也要变成动静的了,要拼接上 index,就变成依据索引去找对应的校验项了,即为:
:prop="'formItemArr.' + index + '.name'"
,这样的话,就变成了:prop="formItemArr.0.name"、prop="formItemArr.1.name"、prop="formItemArr.2.name" ...
这样的话,就能够关照到每一项中的每一个绑定的值了,校验就不会漏掉
- 校验规定写成内联就能够触发校验函数
this.$refs["ruleForm"].validate((val) => {})
了
<el-form-item
label="姓名"
:prop="'formItemArr.' + index + '.name'"
:rules="{
required: true,
message: '请填写',
trigger: 'blur',
}"
>
......
残缺代码
演示的话,大家间接复制粘贴即可
<template>
<div class="box">
<el-button @click="addForm" size="mini" type="primary" plain
> 增加表格 </el-button
>
<el-button @click="saveForm" size="mini" type="primary" plain
> 保留表格 </el-button
>
<br />
<br />
<el-form
:model="ruleForm"
ref="ruleForm"
label-width="100px"
class="formform"
>
<div
class="formformItemClass"
v-for="(item, index) in ruleForm.formItemArr"
:key="index"
>
<el-form-item
label="姓名"
:prop="'formItemArr.' + index + '.name'"
:rules="{
required: true,
message: '请填写',
trigger: 'blur',
}"
>
<el-input
size="mini"
v-model.trim="item.name"
placeholder="请填写"
style="width: 200px"
></el-input>
</el-form-item>
<el-form-item
label="性别"
:prop="'formItemArr.' + index + '.gender'"
:rules="{
required: true,
message: '请抉择',
trigger: 'change',
}"
>
<el-select
clearable
size="mini"
v-model="item.gender"
placeholder="请抉择"
>
<el-option label="男" value="男"></el-option>
<el-option label="女" value="女"></el-option>
</el-select>
</el-form-item>
</div>
</el-form>
</div>
</template>
<script>
export default {data() {
return {
ruleForm: {
// 动静循环项数组
formItemArr: [
{
name: "",
gender: "",
},
],
},
};
},
methods: {
// 增加一个表格
addForm() {
let itemObj = {
name: "",
gender: "",
};
this.ruleForm.formItemArr.push(itemObj);
},
// 保留表格
saveForm() {this.$refs["ruleForm"].validate((val) => {if (val) {console.log("符合要求,保留胜利", this.ruleForm);
} else {console.log("error submit!!");
return false;
}
});
},
},
};
</script>
<style lang="less" scoped>
.box {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 24px;
.formform {
width: 360px;
.formformItemClass {
padding-top: 24px;
border: 2px dashed #ccc;
margin-bottom: 18px;
}
}
}
</style>
好忘性不如烂笔头,记录一下吧
^_^