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

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

参照博主：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();

                    })