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

最新推荐文章于 2024-08-12 01:27:57 发布

房东的猫〃

最新推荐文章于 2024-08-12 01:27:57 发布

阅读量6.7k

点赞数 4

本文链接：https://blog.youkuaiyun.com/Landlord_cat/article/details/107487040

版权

本文记录了使用Ant Design Vue库进行动态添加和删除Input行的操作，并详细说明了如何实现动态表单的校验。手机号等特定表单验证在methods内实现，通过预先在data中定义一个空对象数组来确保至少展示一行Input，避免表单内容隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里涉及到动态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