ant-design-vue 动态添加input行及动态校验

这里涉及到动态input表单校验 我仅给自己记录一下

<!-- 动态添加行 -->
   <a-form-model-item
       :wrapper-col="newWrapper"
       style="padding-left:63px;padding-right:40px;"
       v-for="(item, index) in form.information"
       :key="item.key"
       >
       <a-form-model-item class="fl" :prop="'information.' + index + '.name'"
       :rules="{
           required: true,
           message: '店铺名不能为空',
           trigger: ['blur','change'],
       }">
           <a-input
               v-model.trim="form.information[index].name"
               placeholder="请输入店铺名称"
               style="margin-right: 1%"
           />
       </a-form-model-item>
       <a-form-model-item class="fl" :prop="'information.' + index + '.address'"
       :rules="{
           required: true,
           message: '店铺地址不能为空',
           trigger: ['blur','change'],
       }">
           <a-input
               v-model.trim="form.information[index].address"
               placeholder="请输入店铺地址"
               style="margin-right: 1%"
           />
       </a-form-model-item>
       <a-form-model-item class="fl" :prop="'information.' + index + '.storeManagerName'"
       :rules="{
           required: true,
           message: '店长姓名不能为空',
           trigger: ['blur','change'],
       }">
           <a-input
               v-model.trim="form.information[index].storeManagerName"
               placeholder="请输入店长姓名"
               style="margin-right: 1%"
           />
       </a-form-model-item>
       <a-form-model-item class="fl" style="margin-right: 3%;" :prop="'information.' + index + '.storeManagerPhone'"
       :rules="[{required: true,message: '店长手机不能为空',trigger: ['blur','change']},
               {validator: mobilephoneValidate,trigger: ['blur','change'] }]"          
       >
           <a-input
               v-model.trim="form.information[index].storeManagerPhone"
               placeholder="请输入店长手机号"
           />
       </a-form-model-item>
       <a
       v-if="form.information.length > 1"
       :disabled="form.information.length === 1"
       @click="removeRows(item)"
       >删除</a>
   </a-form-model-item>

添加 删除的方法

// 动态删除添加输入行
        removeRows(item) {
            let index = this.form.information.indexOf(item);
            if (index !== -1) {
                this.form.information.splice(index, 1);
            }
        },
        addRows() {
            this.form.information.push({
                name: '',
                address: '',
                storeManagerName: '',
                storeManagerPhone: '',
                key: Date.now(),
            });
        },

手机号或者其他单独的表单校验写在methods里

// 动态添加行 店长手机号验证
        testMobilephone: function (str) {
            const regex = /^1[3456789]\d{9}$/
            if (!regex.test(str)) {
            return false
            } else {
            return true
            }
        },
        mobilephoneValidate (rule, value, callback) {
        // 主要就是添加一个对undefined和空串的判断
        if (typeof (value) === 'undefined' || value === '') {
            callback()
            } else {
                if (!this.testMobilephone(value)) {
                callback(new Error('请输入正确手机格式'))
                }
                callback()
            }
        },

这里information数组 在data里写上一组空对象 是为了保证有一组input行显示出来 不写input行则会隐藏掉