【Vue】ElementUi el-autocomplete 使用clearable属性,点击清除重新输入提示不显示

599 阅读1分钟

点击清除重新输入时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();    },
},

参考文档链接https://www.h5w3.com/82286.html