elementui表单循环添加校验 

 1  <el-form
 2         :model="dynamicValidateForm"
 3         ref="dynamicValidateForm"
 4         :inline="true"
 5       >
 6         <template v-for="(item, index) in dynamicValidateForm.domains">
 7           <div :key="index + 6" class="demo-dynamic">
 8             <span :key="index.index + 5" class="demo-dynamic-span">{{
 9               index + 1
10             }}</span>
11             <el-form-item
12               label="数量："
13               :prop="'domains.' + index + '.num'"
14               :key="item.index + 1"
15               class="displays"
16               :rules="{ required: true, min: 1, message: '数量不能为0,', trigger: 'change' }"
17             >
18               <el-input
19                 v-model="item.num"
20                 placeholder=""
21                 clearable
22                 size="small"
23               ></el-input>
24             </el-form-item>
25 
26             <el-form-item
27               label="日期1："
28               :prop="'domains.' + index + '.jhrq'"
29               :key="item.index + 2"
30               class="displays"
31               :rules="{ required: true, message: '日期不能为空', trigger: 'blur' }"
32             >
33               <el-date-picker
34                 v-model="item.jhrq"
35                 type="date"
36                 placeholder="请选择"
37                 size="small"
38                 value-format="yyyy-MM-dd"
39               >
40               </el-date-picker>
41             </el-form-item>
42 
43             <el-form-item
44               label="日期2："
45               :prop="'domains.' + index + '.xdrq'"
46               :key="item.index + 3"
47               class="displays"
48               :rules="{ required: true, message: '日期不能为空', trigger: 'blur' }"
49             >
50               <el-date-picker
51                 v-model="item.xdrq"
52                 type="date"
53                 placeholder="请选择"
54                 size="small"
55                 value-format="yyyy-MM-dd"
56               >
57               </el-date-picker>
58             </el-form-item>
59             <el-form-item
60               :key="item.index + 4"
61               v-if="item.index == dynamicValidateForm.domains.length - 1"
62               class="displays w8"
63             >
64               <i
65                 class="el-icon-circle-plus-outline icon1s"
66                 @click="changeFormItem('add', item)"
67               ></i>
68               <i
69                 class="el-icon-remove-outline icon2s"
70                 @click="changeFormItem('reduce', item)"
71               ></i>
72             </el-form-item>
73           </div>
74         </template>
75       </el-form>

 data 数据结构：

 1 dynamicValidateForm: {
 2   domains: [
 3     {
 4       num: "",
 5       jhrq: "",
 6       xdrq: "",
 7       index: 0 8     }
 9   ]
10 }

 methods：代码

1 let obj = {
2   num: ""，3   jhrq: "",
4   xdrq: "",
5   index: item.index + 16 };
7 let arr = JSON.parse(JSON.stringify(this.dynamicValidateForm.domains));
8 arr.push(obj);
9 this.$set(this.dynamicValidateForm, "domains", arr);

注意：

 1. 我们需要在prop时使用数组名称+index+具体参数,同时rules规则需要单独配置，接着v-model需要双向绑定对应的值

     以上为：'domains.' + index + '.num'" 或者.num其他

  2. data 里面默认有一组初始化为空的数据，否则双向绑定、验证会失败

  3. 动态新增可以使用this.dynamicValidateForm.domains.push(this.$options.data.call(this).dynamicValidateForm.domains[0]) 或者是 this.$set()方法

 

posted @ 2023-04-17 11:03  等风来灬  阅读(270)  评论(0)  编辑  收藏  举报