element-ui form表单嵌套循环校验

element-ui form表单嵌套校验

1. 记录一次使用 element-ui form 表单嵌套校验的需求
2. 数据结构： formData:{id:1,type:'test数据',input_info:[...]}
   上述formData 中的 input_info 数组就是我们需要渲染成表单的数据
   具体使用：

		<div class="form">
            <el-form label-position="right" label-width="145px"  ref="inputFieldForm" :model="formData">
              <el-form-item
                v-for="(item,index) in formData.input_info"
                :key="item.id"
                :label="item.cn_alias + '：'"
                :prop="`input_info[${index}].ds_column_name`"
                :rules="{
                  required: item.is_require,
                  message: '输入字段值不能为空!',
                  trigger: item.ds_type === 1 ? 'change':'blur',
                }"
              >
                <el-radio-group v-model="item.ds_type" @change="ev_changeFieldType(item,index)">
                  <el-radio :label="2">数据源</el-radio>
                  <el-radio :label="1">元数据</el-radio>
                </el-radio-group>
                <el-input style="display:block" v-show="item.ds_type === 2" v-model="item.ds_column_name" type="text" placeholder="请输入" clearable></el-input>
                <autocomplate-input
                  v-show="item.ds_type === 1"
                  requestAPI="metaDataList"
                  ref="input_info"
                  optionKey="name"
                  optionValue="name"
                  modelAttr="ds_column_name"
                  dataSourceType="optionKey"
                  :sourceData="item"
                ></autocomplate-input>
              </el-form-item>
            </el-form>
          </div>

js操作

清空具体某个校验：
 this.$refs['inputFieldForm'].clearValidate(`input_info[${index}].ds_column_name`)