Vue+Elemnt-UI遍历生成form-item并为其绑定校验规则

标签：form 绑定 Elemnt 校验 item model clearValidate

需求：接口获取数据，动态渲染表单（文本框类型，内容，标签，是否必填）

参照博主：blog.csdn.net/qq_33769914/article/details/122449601

遇到的问题：1.通过对单个item绑定的校验规则不生效（表现为：不弹提示，或填了内容依旧提示）                       2.提示出现后通过clearValidate()函数无法重置表单。     出现问题的原因：1.忽视了在form主体上绑定model(注意：循环数组必须是位于model内的)                              2.prop写成动态拼接的模式，prop的名字一定在model内的                              3.校验的内容可以是直接绑定或者卸载methods内（单纯写在data内是不生效的）。     代码：                       <el-form ref="tabForm" size="small" style="padding: 10px;" label-width="auto"                                     :key="index" :disabled="!editFormVisible" :model="unit">                                     <div v-for="(item, ind) in unit.content" :key="ind">                                         <el-form-item :label="item.param_item +':'"                                               :prop="`content.${ind}.param_value`"                                              :rules="{required:item.is_key == 1 ,message:'请填写必填项', trigger: 'blur'}">                                             <el-input v-model="item.param_value" class="inputsty"                                                 :type="item.parent_type === 2 ?'textarea':'input'" :rows="6"></el-input>                                         </el-form-item>                                     </div>                                                                 </el-form>   注意：如果还需要遍历生成多个form，那么在重置表单校验规则时利用this.$refs.tabForm.clearValidate(),是会报错的。需要map挨个重置。  代码： this.$refs.tabForm.map(item => {                         item.clearValidate();                     })  

标签：form,绑定,Elemnt,校验,item,model,clearValidate
From： https://www.cnblogs.com/xynblog/p/17669828.html