思路: 自定义组件事件 bulr, 手动触发表单验证
- el-select 组件中定义 bulr 事件
@blur.native.capture='onclick'
- 定义表单 rules 规则
- 手动触发对应表单规则校验
this.$refs[formName].validateField(type)
formName:表单名称 type:表单属性
// html
// 页面中我定义了多个表单,所以传入了表单 ref 名称。单个表单可以只传属性值
<el-select
@blur.native.capture="e => searchKeyBlur(e, 'refForm','selectKey')"
style="width: 320px;"
v-model="praRuleForm.selectKey"
filterable placeholder="请选择亲属关系">
<el-option
v-for="item in relationList"
:key="item.dictDataCode"
:label="item.dictDataName"
:value="item.dictDataCode">
</el-option>
</el-select>
// js
searchKeyBlur(e, formName, type) {
this.$refs[formName].validateField(type)
// 代表触发 formName 表单所对应 type 属性的规则
},