el-select的错误提示不生效、el-select验证失灵、el-select的blur规则失灵_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

2. 在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

3. 在js中添加方法onBlur

  methods: {
    onBlur(ref,type){
      this.$refs[ref].validateField(type)
    },
}
1
2
3
4
5

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

• 原理：blur.capture.native 会在子组件上直接绑定原生的 blur 事件，并且在事件触发时会从内层向外层逐级捕获，直到根组件。这样无论点击 el-select 内部的哪个元素导致 blur 事件，都会被捕获到。