点击清除重新输入时input没有失去焦点,这个问题会导致再次输入时没有聚焦,所以出现不显示的问题。通过查看源码发现点击输入时候会执行以下方法,主要原因是把 this.activated的值设置为false了,然后回调成功的时候没有设置 this.activated = true,所以就导致了不显示的问题。源码如下:
handleFocus: function handleFocus(event) { this.activated = true; this.$emit('focus', event); if (this.triggerOnFocus) { this.debouncedGetData(this.value); } }, handleBlur: function handleBlur(event) { this.$emit('blur', event); }, handleClear: function handleClear() { this.activated = false; this.$emit('clear'); },
解决的核心思路就是想办法把this.activated的值设置为true,如以下代码:
<el-autocomplete ref="elactivated" v-model="searchCode2" class="inline-input" :maxlength="11" clearable :fetch-suggestions="querySearch" placeholder="请输入" :trigger-on-focus="false" @select="handleSelect" @clear="clearInput" > <template slot-scope="{ item }"> <div v-show="item.isShow"> <div class="box"> <div class="w50 colorC0C4CC"> 姓名 </div> <div class="w50 colorC0C4CC"> 年龄 </div> </div> <div class="box"> <div class="w50"> {{ item.name}} </div> <div class="w50"> {{ item.age}} </div> </div> </div> <div v-show="!item.isShow" class="box box-pack-center "> 暂无记录 </div> </template> </el-autocomplete>
methods: {
async querySearch(queryString, cb) { const that = this; let results = ''; try { results = await that.loadAll(); if (results.length > 0) { results.forEach((item, index) => { const newData = { name: '', isShow: true, age: '', }; newData.name= item.name; newData.age= item.age; }); } else { that.restaurants = [{ name: '', isShow: false, age: '', }]; } } catch (res) { that.$message({ message: res.message, type: 'warning', }); } } // 调用 callback 返回建议列表的数据 cb(that.restaurants); that.$refs.elactivated.handleFocus(); },
},