element-ui form表单嵌套校验
- 记录一次使用 element-ui form 表单嵌套校验的需求
- 数据结构:
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`)