当前位置:   article > 正文

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

elementplus el-select v-model placeholder 不生效
  • 发现问题
    在使用el-select进行表单验证的时候,发现点击下拉列表没选的情况下,他不会提示没有选择选项的信息,我设置了rule如下
<!--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'}
        ]
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

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

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

改为

return {
      editForm: {
        level: [],
      },
  • 1
  • 2
  • 3
  • 4

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

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

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

  • 原理:blur.capture.native 会在子组件上直接绑定原生的 blur 事件,并且在事件触发时会从内层向外层逐级捕获,直到根组件。这样无论点击 el-select 内部的哪个元素导致 blur 事件,都会被捕获到。
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/神奇cpp/article/detail/890746
推荐阅读
相关标签
  

闽ICP备14008679号