el-form组件 el-form-item中使用自定义组件校验问题

198 阅读1分钟

使用场景:在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>

注意:

  1. ref="elFormItem" 同一个文件需要多个校验时,这里的ref不能相同
  2. $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)
}