el-form面对表单内容有数组嵌套时校验,和数组表单校验不生效的解决办法(element-ui框架),输入之后表单依然有验证提示,每次添加表单某一项,我们处理表单验证的方法

表单内容如果是数组需要循环遍历,那么我们平常prop直接写一个名字就不能校验了,因为他不知道我们要校验哪一个,所以我们的prop就要绑定mode对象下的后边所有的数据 相当于就是所我们要绑定的是对象下的哪一个数组,数组下的哪一个对象,对象下绑定的哪一个字段,prop绑定过之后,我们还要添加:rules重新绑定校验规则,下方有prop和rules代码示例

    <template>
      <el-form
        :model="manui_list"
        :rules="manui_rules"
        ref="manui_form"
        class="manui_form"
      >
         <el-form-item
            label='装货点'
            v-for="(item, index) in manui_list.form"
            :key="item.id"
            :prop="`form[${index}].location`"
            :rules="manui_rules.location"
         >
             <el-select
                v-model="manui_list.form[${index}].location"
                placeholder="请选择"
             >
                <el-option label="上海" :value="1">
                </el-option>
                <el-option label="北京" :value="2">
                </el-option>
             </el-select>
          </el-form-item>
       </el-form>
      </template>
      <script>
        export default{
             data(){
              return {
                 manui_list: {
                    form:[
                           {
                             id: 1,
                             location: null,
                             num: '',
                             weight: ''
                           },
                           {
                             id: 2,
                             location: null,
                             num: '',
                             weight: ''
                           }
                         ]
                },
                // 表单验证
                manui_rules: {
                      location: [
                        { required: true, message: '请选择装货点', trigger: 'change' }
                      ],
                      num: [
                        { required: true, message: '请输入数量', trigger: 'blur' }
                      ],
                      weight: [
                       { required: true, message: '请输入重量', trigger: 'blur' }
                      ],
                   },
              }
           }
        }
      </script>

通过代码示例可以看出 el-select 绑定的对象,而prop锁定的是manui_form 下的绑定的字段,之后用绑定rules重新校验规则,这种绑定我们一般是用作于表单验证下,需要添加某一项时,才如此使用。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值