美文网首页
elementUI中动态表单的校验

elementUI中动态表单的校验

作者: guoss | 来源:发表于2018-08-22 14:24 被阅读0次

首先需要再data中定义表单变量

form:{
  interview_plan_array:[],
}

循环的表单数据

<el-form :model="form" label-width="130px" ref="form" :rules="interviewRules">
  <div v-for="(item,index) in form.interview_plan_array" class="group" style="position: relative;" :key="index">
      <el-form-item :label="item.name">
        <el-select v-model="item.user_id"  size="small" filterable class="firstItem">
          <el-option v-for="(item,index) in interviewer" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
       </el-form-item >     
        <el-form-item v-model="item.position"  :prop="'interview_plan_array.'+index+'.position'" :rules="item.user_id!=='' ? interviewRules.position : []">
         <el-select v-model="item.position"  size="small" filterable >
          <el-option v-for="(item,index) in position" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
  </div>
</el-form>

表单的校验规则如下

interviewRules:{
  position:[{required: true, message: '请选择职位', trigger: 'change'}]
},

通过给每一个循环的表单数据添加对应的校验规则即可完成校验 ,其中prop是传入表单的字段,rules是添加的校验规则。

相关文章

  • elementUI中动态表单的校验

    首先需要再data中定义表单变量 循环的表单数据 表单的校验规则如下 通过给每一个循环的表单数据添加对应的校验规则...

  • elementui 动态表单校验

    https://segmentfault.com/a/1190000020410128?utm_source=ta...

  • elementUI form表单校验报错

    elementUI form表单动态增加表单项使用v-for进行表单校验时报错,报错信息如下: 主要原因是el-f...

  • elementui表单自定义校验及嵌套验证

    自定义校验规则额外参数 多个输入框校验逻辑一致 ElementUI表单校验prop的嵌套写法页面中的表单经常会有校...

  • vue+elementUi 动态表单校验

    在项目中会有很多时候需要用到表单,并且还会有动态增删表单的情况,普通的单个表单校验很简单,那么动态的表单如何进行表...

  • ElementUI中复杂表单校验

    本文介绍了两种特殊表单的校验方式。 1. 对象里包含数组2. 对象里包含对象 首先看第一种,对象里包含数组,表单通...

  • elementUI踩坑

    ElementUI 表单校验没反应的问题 因为同一页面下写了多个表单,我需要对所有表单都进行校验无误后再向后台发起...

  • elementUI表单校验

    感谢度娘 element-ui中表单验证的三种方式 第一种常用方式:表单上加rules{object} 这种方式需...

  • elementui表单校验

    进行表单校验需要通过rules 属性传入约定的验证规则,并且需要在在容器上绑定prop...

  • vue element嵌套表单验证

    在vue2搭配elementUI中,如果是动态表单中需要表单验证,官方文档的解决方法 https://elemen...

网友评论

      本文标题:elementUI中动态表单的校验

      本文链接:https://www.haomeiwen.com/subject/sfxyiftx.html