问题
需求是做一个查询企业的功能,期望必须进行选择后进行查询,如果用户自主输入并没有进行选择,失去焦点的时候清空文本框里面的内容,给el-autocomplete添加@blur事件后发现,在下拉没有出现之前快速失去焦点才能触发blur,下拉列表出现后,blur就失效了,这样就很难达到失去校验清空内容
解决方案
el-autocomplete添加chagne事件,每当文本框里面的内容改变了就清空v-model绑定的变量,代码如下
// 普通
<el-autocomplete
v-model="searCompanyName"
:fetch-suggestions="SearchCompany"
@change="changeCompany">
<template #default="{ item }">
{{item.companyName}}
</template>
</el-autocomplete>
// 失焦清空
<el-autocomplete
v-model="searCompanyName"
:fetch-suggestions="SearchCompany"
@change="changeCompany(1)">
<template #default="{ item }">
{{item.companyName}}
</template>
</el-autocomplete>
function changeCompany(type) {
if(type === 1){
state.searCompanyName = "";
}
}
效果如下图
普通下的
失焦清空