<div class="display">
<span>科室: </span>
<el-autocomplete
ref="inlineInputDep"
class="inline-input"
v-model="searchWordDep"
:fetch-suggestions="querySearchDep"
placeholder="请选择科室"
@select="handleSelectDep">
</el-autocomplete>
<el-button type="primary" @click="instmSubmit">提交</el-button>
</div>
querySearchDep(queryString, cb) {
console.log("querySearchDep................")
if(this.InstrumentsList.length>0){//还未提交数据 进行切换科室操作
this.$confirm('还未提交数据,是否切换科室?', '提示', {
confirmButtonText: '是',
cancelButtonText: '否',
type: 'warning'
}).then(() => {
this.InstrumentsList=[];
let restaurants = this.restaurants;
let results=queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
cb(results);
}).catch(() => {
this.$nextTick(()=>{
this.$refs.inlineInputDep.blur();
return
})
});
}else{
let restaurants = this.restaurants;
let results=queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
cb(results);
}
// let restaurants = this.restaurants;
// let department_token=this.department_token
// let results
// if(/^[a-zA-Z]+$/.test(queryString)){
// results=queryString?department_token.filter(this.createFilter(queryString)):department_token
// }else{
// results=queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
// }
// cb(results);
},
报错:this.$refs.inlineInputDep.blur is not a function
不理解
在 Vue 组件中使用了 this.$refs.inlineInputDep.blur(),但是 $refs.inlineInputDep 对应的 DOM 元素并没有 blur 方法。
解决方法:
确认 $refs.inlineInputDep 所引用的 DOM 元素是否正确,在组件中正确地定义了 ref="inlineInputDep"。
确认 $refs.inlineInputDep 所引用的 DOM 元素是否具有 blur 方法,可以在控制台中查看 $refs.inlineInputDep 的值并尝试调用其 blur 方法。
如果 $refs.inlineInputDep 对应的 DOM 元素确实没有 blur 方法,可以尝试使用其他方法来模拟 blur 的行为,例如使用 this.$nextTick(() => { document.activeElement.blur(); }); 来使当前活动元素失去焦点。
打印一下 this.$refs.inlineInputDep 看看有没有 blur事件