在vue2搭配elementUI中,如果是动态表单中需要表单验证，官方文档的解决方法
https://element.eleme.cn/#/zh-CN/component/form
image
image.gif
<el-form-item
v-for="(domain, index) in dynamicValidateForm.domains"
:label="'域名' + index"
:key="domain.key"
:prop="'domains.' + index + '.value'"
:rules="{
required: true, message: '域名不能为空', trigger: 'blur'
}"
>
<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
</el-form-item>
image.gif
如果是多层表单相互嵌套，也是类似的思路 举例1https://segmentfault.com/a/1190000014366951 举例2https://www.cnblogs.com/shy1766IT/p/11186772.html
但是 如果多层便利便利嵌套的 el-form-item 不规律的便利生成（子组件并向生成多个el-form-item）,不规律的动态验证，那么每一个el-form-item 中的" :prop="'domains.' + index + '.value'" 的prop就很容易报错,或者找不到对应的path，很麻烦
一个比较简便的写法
html
<!--只要当前表单组件最终渲染在父组件内部-->
<el-form-item prop="testRules" :rules="testRules('自己传参')" >
<el-input
v-model.trim="test"
placeholder="请输入"
/>
</el-form-item>
image.gif
js
//可以直接放在data里面
testRules: (data) => {
return [
{
validator:(rule, value, callback) => {
if(!data){
//验证不通过
callback(new Error('！表单验证'));
}
//验证通过
callback();
},
trigger: 'blur'
}
];
}
image.gif
这样子写 就可以省下来:prop="'domains.' + index + '.value'" 拼接的那一大堆
