el-select的错误提示不生效、el-select验证失灵、el-select的blur规则失灵

  • 发现问题
    在使用el-select进行表单验证的时候,发现点击下拉列表没选的情况 下,他不会提示没有选择选项的信息,我设置了rule如下
vue 复制代码
<!--el-select-->
   <el-form-item  label="等级" prop="level">
  <el-select v-model="editForm.level"  placeholder="请选择级别" auto-complete="off"
                     >
            <el-option label="1级" value="1"></el-option>
            <el-option label="2级" value="2"></el-option>
	 </el-select>
  </el-form-item>
  
js:
  rule{
  	level: [
          {required: true, message: '请选择等级', trigger: 'blur'}
        ]
  }

我的prop和v-model的属性名也是对应的,就是很奇怪,如果鼠标从下拉列表里面移动出来,他不会提示信息,只有在最后面提交表单的时候才会提示。没有达到我的需求。

  • 网上查找方案
    在网上看了很多解决方案,发现很多都没有效果
  1. 将v-model和prop的绑定的属性名改成相同的,我已经做到了,没有用
  2. 将blur改成change,这种方案我刚开始试了,没有效果,后面发现,如果将
js 复制代码
return {
      editForm: {
        level: null,
      },

改为

js 复制代码
return {
      editForm: {
        level: [],
      },

即将初始值改成一个空列表,就能够实现提示的信息,但是这种方法存在缺陷,就是在初始化的时候,直接就给你提示了,而不是你从el-select里面出来且没选的情况提示。

  • 最终解决方法
  1. 这个rule还是要写,trigger写的是change。
js 复制代码
  rule{
  	level: [
          {required: true, message: '请选择等级', trigger: 'change'}
        ]
  }
  1. 在el-select添加方法@blur.capture.native="onBlur('editForm','level')",如下,
    注意要把el-form设置ref="editForm",将ref和model绑定的值作为参数传入,
html 复制代码
<el-select v-model="editForm.level"  placeholder="请选择级别" auto-complete="off"
@blur.capture.native="onBlur('editForm','level')"
                     >
  1. 在js中添加方法onBlur
js 复制代码
  methods: {
    onBlur(ref,type){
      this.$refs[ref].validateField(type)
    },
}

这样就能解决blur事件不生效 的问题了,结果如图,如果没有选择,点到其他地方就会提示

  • 原理:blur.capture.native 会在子组件上直接绑定原生的 blur 事件,并且在事件触发时会从内层向外层逐级捕获,直到根组件。这样无论点击 el-select 内部的哪个元素导致 blur 事件,都会被捕获到。
相关推荐
爱生活的苏苏3 分钟前
vue生成二维码图片+文字说明
前端·vue.js
拉不动的猪5 分钟前
安卓和ios小程序开发中的兼容性问题举例
前端·javascript·面试
炫彩@之星11 分钟前
Chrome书签的导出与导入:步骤图
前端·chrome
贩卖纯净水.22 分钟前
浏览器兼容-polyfill-本地服务-优化
开发语言·前端·javascript
前端百草阁28 分钟前
从npm库 Vue 组件到独立SDK:打包与 CDN 引入的最佳实践
前端·vue.js·npm
夏日米米茶28 分钟前
Windows系统下npm报错node-gyp configure got “gyp ERR“解决方法
前端·windows·npm
且白1 小时前
vsCode使用本地低版本node启动配置文件
前端·vue.js·vscode·编辑器
程序研1 小时前
一、ES6-let声明变量【解刨分析最详细】
前端·javascript·es6
疯狂的沙粒1 小时前
在uni-app中如何从Options API迁移到Composition API?
javascript·vue.js·uni-app
siwangqishiq21 小时前
Vulkan Tutorial 教程翻译(四) 绘制三角形 2.2 呈现
前端