element中如何对el-select进行失焦校验

1,000 阅读1分钟

如图:

image1.png

想要实现的效果是当选择框失去焦点的时候会显示出校验提示,解决的办法如下: 因为使用的是element中的el-select组件,所以可以根据框架中提供的校验方式来进行校验。

首先在el-form上加上rules属性并在data中进行定义

image2.png

然后在下拉选择框中定义一个失去焦点事件

image3.png

利用表单组件示例中的方法即可

image4.png

image5.png

另外建议将v-model绑定的值和props定义的属性名定义成一样的

image6.png

最终会实现失去焦点是的校验效果

image7.png

end