vue elementUI form组件动态添加el-form-item rules且支持添加自定义校验方法
组件动态添加el-form-item并且动态添加rules的方法可以参考博客:
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
添加自定义校验方法
给el-form-item添加validatePassFun方法
<el-form-item
v-for="(item, index) in form.key_list"
:prop="'key_list.' + index + '.label'"
:rules="[
{required: true, message: $t('请输入'), trigger: 'blur'},
validatePassFun('值不能重复', form.key_list, 'change'),
validatePassFun('名称不能重复', form.key_list, 'blur')
]"
:key="index">
</el-form-item>
validatePassFun
validatePassFun(msg, _data, action) {
return {
required: true,
validator: (rule, value, cb) => {
if (_data不符合校验条件) {
cb(new Error(msg))
} else {
cb()
}
},
trigger: action
}
}
(rule, value, cb) 为默认参数赋值,应该用_data和value等组合做业务逻辑校验。