2022-06-30

关于vue+ ant-design-vue动态列表加校验

我们的项目呢，是一个二维数组表单，实现之后，才发现各种校验不生效。先看一下我们的需求效果

但是值得注意的是：Form.Item 会对唯一子元素进行劫持，并监听 blur 和 change 事件，来达到自动校验的目的，所以请确保表单域没有其它元素包裹。如果有多个子元素，将只会监听第一个子元素的变化。

还有就是，prop和v-model的值必须是一一对应的，代码附上：

 

                + 添加条件

               

                   

                       

                       

                           

                               

                                :prop="'executeList.' + parentIndex + '.conditionField'"

                                :rules=" [{ required: true, message: '不能为空', trigger: 'change' }]">

                                   

                                       

                                   

                               

                           

                           

                               

                                    + 添加值

                               

                           

                       

                       

                           

                               

                               

                                   

                                       

                                        :prop="'executeList.' + parentIndex + '.items.' + childIndex + '.conditionValue'"

                                        :rules=" [{ required: true, message: '不能为空', trigger: 'change' }]"

                                        >

                                           

                                       

                                   

                                   

                                       

                                        :prop="'executeList.' + parentIndex + '.items.' + childIndex + '.amountField'"

                                        :rules=" [{ required: true, message: '不能为空', trigger: 'change' }]">

                                           

                                               

                                           

                                       

                                   

                               

                               

                                   

                                       

                                        :prop="'executeList.' + parentIndex + '.items.' + childIndex + '.amountFlow'"

                                        :rules=" [{ required: true, message: '不能为空', trigger: 'change' }]">

                                           

                                       

                                   

                                   

                                       

                                       :prop="'executeList.' + parentIndex + '.items.' + childIndex + '.accountTypeId'"

                                        :rules=" [{ required: true, message: '不能为空', trigger: 'change' }]"

                                       >

                                           

                                                {{ val.typeName }}

                                           

                                       

                                   

                               

                               

                                   

                                       

                                        :prop="'executeList.' + parentIndex + '.items.' + childIndex + '.costTypeId'"

                                        :rules=" [{ required: true, message: '不能为空', trigger: 'change' }]">

                                           

                                                {{ val.typeName }}

                                           

                                       

                                   

                               

                           

                       

                   

               

           

有更好的方法，欢迎留言