使用场景:在vue项目中使用el-form时,el-form-item中有时会嵌套使用自定义封装组件。在做必填校验时会发现无效
代码如下:
<template>
<el-form ref="form" :model="editForm" label-width="120px" :rules="rules">
<el-form-item label="负责人" prop="chargePerson" ref="elFormItem">
<!-- 自定义用户弹窗选择组件 -->
<UserSelect v-model="editForm.chargePerson" @change="(value) => $TableUntil.UserSelectValidate(this,'elFormItem',value)"/>
</el-form-item>
</el-form>
</template>
注意:
ref="elFormItem"
同一个文件需要多个校验时,这里的ref
不能相同$TableUntil.UserSelectValidate(this,'elFormItem',value)
该方法是公共方法
UserSelectValidate
代码如下:
/**
* 用户选择组件 失去焦点校验
* @param {*} this 组件this
* @param {*} refName 父组件ref名字
* @param {*} value 校验的值
*/
export function UserSelectValidate(_that, refName, value) {
_that.$refs[refName].$emit("el.form.blur", value)
}