• 发现问题
  在使用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'}]}

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

• 网上查找方案
  在网上看了很多解决方案，发现很多都没有效果

1. 将v-model和prop的绑定的属性名改成相同的，我已经做到了，没有用
2. 将blur改成change，这种方案我刚开始试了，没有效果，后面发现，如果将

return {editForm: {level: null,},

改为

return {editForm: {level: [],},

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

• 最终解决方法

1. 这个rule还是要写，trigger写的是change。

  rule{level: [{required: true, message: '请选择等级', trigger: 'change'}]}

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')">

3. 在js中添加方法onBlur

  methods: {onBlur(ref,type){this.$refs[ref].validateField(type)},
}

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

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