Vue+element UI的动态表单的校验(根据条件动态切换校验格式)

** Vue+element UI的动态表单的校验(根据条件动态切换校验格式)**

1.整个表单是可新增的，所以要遍历生成；
2.因为input 是动态生成的，所以检验规则也需要动态生成

实现

elementui的form表单实现校验的时候要给当前el-form-item加上prop属性,
因为我们是遍历生成的表单，那我们的写法就要写成:
重点在prop属性

<div v-for="(item,index) in formData.lists">
 <el-form-item
    :rules="[{required: true, message: '请填写数据'}]"
    :prop="'lists.' + index +'.concatValue'">
    <el-input v-model="item.concatValue"></el-input>
 </el-form-item>
</div>

如果我们遇到多层级的怎么办呢

话不多说 直接上代码

<div v-for="(item,index) in formData.lists" :key="index">
  <div v-for="(items,key) in item.childred" :key="key">
     <el-form-item
      :rules="[{required: true, message: '请填写数据'}]"
      :prop="'lists.' + index +'.childred.' + key + '.concatValue'">
      <el-input v-model="item.concatValue"></el-input>
   </el-form-item>
  </div>
</div>

拿去用一用吧，点个赞！