关于vue+ ant-design-vue动态列表加校验
我们的项目呢，是一个二维数组表单，实现之后，才发现各种校验不生效。先看一下我们的需求效果
但是值得注意的是：Form.Item 会对唯一子元素进行劫持，并监听 blur 和 change 事件，来达到自动校验的目的，所以请确保表单域没有其它元素包裹。如果有多个子元素，将只会监听第一个子元素的变化。
还有就是，prop和v-model的值必须是一一对应的，代码附上：
<div v-if="form.isCondition">
<a-button type="primary" class="mg-20" @click="addCondition()">+ 添加条件</a-button>
<div v-for="(parent,parentIndex) in form.executeList" :key="parentIndex">
<div class="execute-list">
<div v-if="parentIndex != 0" class="add-ico"><a-icon type="close-circle" class="ico" @click="del(parentIndex)"/></div>
<a-row :gutter="24" class="mg-20">
<a-col :span="10" :offset="2">
<a-form-model-item label="选择条件判断:"
:prop="'executeList.' + parentIndex + '.conditionField'"
:rules=" [{ required: true, message: '不能为空', trigger: 'change' }]">
<div @click="openModal('conditional', {index:parentIndex,val:parent.conditionField,routerUrl:form.nodeRouterUrl})">
<a-input v-model="parent.conditionField" placeholder="请选择" :maxLength="30" disabled/>
</div>
</a-form-model-item>
</a-col>
<a-col :span="10" >
<a-form-model-item label="" >
<a-button type="primary" @click="addPrice(parentIndex)">+ 添加值</a-button>
</a-form-model-item>
</a-col>
</a-row>
<div v-for="(child,childIndex) in parent.items" :key="childIndex">
<div class="price-list">
<div class="btn-ico" v-if="childIndex != 0" @click="delChild(parentIndex,childIndex)"><a-icon type="close-circle" class="ico" /></div>
<a-row :gutter="24" >
<a-col :span="10" :offset="2">
<a-form-model-item label="值:"
:prop="'executeList.' + parentIndex + '.items.' + childIndex + '.conditionValue'"
:rules=" [{ required: true, message: '不能为空', trigger: 'change' }]"
>
<a-input v-model="child.conditionValue" placeholder="请输入" :maxLength="30" />
</a-form-model-item>
</a-col>
<a-col :span="10" >
<a-form-model-item label="选择金额字段:"
:prop="'executeList.' + parentIndex + '.items.' + childIndex + '.amountField'"
:rules=" [{ required: true, message: '不能为空', trigger: 'change' }]">
<div @click="openModal('fileld', {index:parentIndex,indexs:childIndex,val:child.amountField,routerUrl:form.nodeRouterUrl})">
<a-input v-model="child.amountField" placeholder="请选择" :maxLength="30" disabled/>
</div>
</a-form-model-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="10" :offset="2">
<a-form-model-item label="金额流向:"
:prop="'executeList.' + parentIndex + '.items.' + childIndex + '.amountFlow'"
:rules=" [{ required: true, message: '不能为空', trigger: 'change' }]">
<j-dict-select-tag v-model="child.amountFlow" placeholder="请选择" dictCode="amount_flow"/>
</a-form-model-item>
</a-col>
<a-col :span="10" >
<a-form-model-item label="所属账套类型:"
:prop="'executeList.' + parentIndex + '.items.' + childIndex + '.accountTypeId'"
:rules=" [{ required: true, message: '不能为空', trigger: 'change' }]"
>
<a-select v-model="child.accountTypeId" @change="tempChanges(child.accountTypeId,parentIndex,childIndex)" :allowClear="true" placeholder="请选择" >
<a-select-option v-for="(val,index) in accountSetList" :key="index" :value="val.id">{{ val.typeName }}</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
</a-row>
<a-row :gutter="24" v-if="child.correlationAccount == '1'">
<a-col :span="10" :offset="2">
<a-form-model-item label="成本类型:"
:prop="'executeList.' + parentIndex + '.items.' + childIndex + '.costTypeId'"
:rules=" [{ required: true, message: '不能为空', trigger: 'change' }]">
<a-select v-model="child.costTypeId" :allowClear="true" placeholder="请选择" >
<a-select-option v-for="(val,index) in CostTypeList" :key="index" :value="val.id">{{ val.typeName }}</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
</a-row>
</div>
</div>
</div>
</div>
</div>
有更好的方法，欢迎留言
