ant-design-vue form表单实现动态循环效验_a-form 动态校验规则

单层循环的话

<a-form-model
   ref="ruleForm"
   :model="form"
   :rules="rules"
>
    //不需要增减的表单项  
    //设置display:flex属性 可让表单显示在一行
    
	<div style="display:flex">
	// prop 表单域的model字段
	  <a-form-model-item  label="姓名"  prop="name"  ref="name">
		<a-input v-model="form.name"></a-input>
 	  </a-form-model-item>
 	   <a-form-model-item label="年龄"  prop="age"  ref="age">
		<a-input v-model="form.age"></a-input>
 	  </a-form-model-item>
	</div>	
	
	//这里你可以写多组表单项
	...
	
	//需要动态增减的表单行
	//InfoList就是我们每次添加表单时要push对象的数组
	
	<div v-for="(item,index) in form.InfoList" :key="item.index"        style="display:flex">
	  <a-form-model-item 
	   label="工作" 
	   :prop=" 'InfoList.' + index + '.work' "
	   //在这里单独为表单项绑定校验规则
	   ：rules="rules.work"
	  >
	 	 <a-input v-model="item.work"></a-input>
 	  </a-form-model-item>
 	  
 	  <a-form-model-item
 	    label="等级" 
	    :prop=" 'InfoList.' + index + '.level' "
	    //在这里单独为表单项绑定一个校验规则
	    ：rules="rules.level"
	    >
	    //input需要绑定到InfoList中的元素
		 <a-input v-model="item.level"></a-input>
 	  </a-form-model-item>
 	  //如果你要保留最开始的表单行  可在删除icon上添加v-if="index !== 0" index为0时不显示删除icon
 	  <a-form-model-item  v-if="index !== 0">
		<a-icon type="minus-circle" @click="removeRow(item)"/>
 	  </a-form-model-item>
 	  
 	  <a-button @click="addRow">增加</a-button>
	</div>
</a-form-model>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

多层循环的话

 <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      class="g3-form-center"
    >
      <a-row>
        <a-col v-bind="colAllSpan.wrapperCol">
          <a-form-model-item label="角色分配" prop="assignment" :labelCol="{ span: 3 }" :wrapperCol="{ span: 18 }">
            <a-select
              v-model="form.assignment"
              mode="tags"
              style="width: 100%"
              placeholder="请选择角色分配"
              @change="handleChanges"
              @deselect="deselect"
            >
              <a-select-option v-for="(item, index) in roleList" :key="index" :value="item.value">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <div class="scopeAuthority">
          <div class="scopeAuthorityitem" v-for="(item, index) in form.roleModelList" :key="index">
            <div class="scopeAuthority_title">*权限范围1- {{ Role[item.name] }}</div>
            <div v-for="(items, indexs) in item.list" :key="indexs">
              <a-col v-bind="colAllSpan.col" v-if="item.name != 0">
                <a-form-model-item
                  label="省"
                  :prop="'roleModelList.' + index +'.list.' + indexs + '.province'"
                  :rules="[{ required: true, message: '所属公司不能为空', trigger: 'blur' }]"
                >
                  <a-input v-model="items.province" :disabled="status == 3 ? true : false" placeholder="测试" />
                </a-form-model-item>
              </a-col>
              <a-col v-bind="colAllSpan.wrapperCol" v-if="item.name == 0">
                <a-form-model-item
                  label="省"
                  :prop="'roleModelList.' + index +'.list.' + indexs + '.province'"
                  :rules="[{ required: true, message: '所属公司不能为空', trigger: 'blur' }]"
                  :labelCol="{ span: 3 }"
                  :wrapperCol="{ span: 6 }"
                >
                  <a-input v-model="items.province" :disabled="status == 3 ? true : false" placeholder="测试" />
       
                </a-form-model-item>
              </a-col>
           
            </div>
            <a-button type="primary" v-if="item.name != 0" class="add" @click="add(index)"> 添加 </a-button>
          </div>
        </div>

      </a-row>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit" v-if="status != 3"> {{ status == 0 ? '确认' : '修改' }} </a-button>
        <a-button style="margin-left: 10px" @click="goBack"> 返回 </a-button>
      </a-form-model-item>
    </a-form-model>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62