美文网首页
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中动态表单的校验

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