el-autocomplete的簡單使用及遇到的坑

// 使用
  <el-autocomplete
        clearable
        @clear="setBlur()"
        @input="handle"
        v-show="listType =='class'"
        v-model="search"
        :fetch-suggestions="querySearch"
        placeholder="請輸入檢索內(nèi)容"
        :trigger-on-focus="false"
        @select="handleSelect"
      ></el-autocomplete>



methods: {
   setBlur() {
      //  在點擊由 clearable 屬性生成的清空按鈕時，主動觸發(fā)失去焦點，解決‘fetch-suggestions’輸入建議不提示的bug
      document.activeElement.blur()
    },
    // 清空輸入框頁面重置
    handle (val) {
      if (val == '' ) {
        this.init() // 頁面重置的代碼
      }
    },
    //過濾項目和class
    async querySearch(queryString, cb) {
        if(queryString && queryString.length>0){
          this.search = queryString
          try {
            const data = await getAllClass(this.search) //search定義在data里
          // 賦值給建議列表，渲染到頁面
            var list = data.list
            // 如果list.length等于0，則代表沒有匹配到結(jié)果。手動給list添加一條提示信息
            if (list.length == '0') {
              list.push({
                id: '-1',
                value: '無匹配結(jié)果'
             })
            // 調(diào)用 callback 返回建議列表的數(shù)據(jù)
              cb(list);
            } else {
              list = list.map(item=>{
              return {
                value:`${item.projectName}`,
                id: `${item.id}`
              }
             })
            // 調(diào)用 callback 返回建議列表的數(shù)據(jù)
             cb(list);
            }
          } catch (error) {
            console.log(error)
          }
        }
     },
    // 選中 input 提示的某一條
    async handleSelect(item) {
      // item.id等于 -1時，代表沒有匹配到任何結(jié)果
      if(item.id != -1){
        this.search = item.value
        const data = await getAllClassList(this.search)
        this.tablet = data.list  // 拿到數(shù)據(jù)進(jìn)行渲染
      }
    },
}

未匹配到結(jié)果時，返回建議列表的數(shù)據(jù)沒數(shù)據(jù)時閃一下的問題。

• 可以在拿到后端返回的數(shù)據(jù)時，判斷數(shù)組長度，如果length為0，則代表沒有匹配到結(jié)果。
  手動給list添加一條提示信息，并在 handleSelect方法中，判斷，點擊的數(shù)據(jù)是否為手動添加的提示信息，如果不是，再攜帶數(shù)據(jù)去發(fā)送請求。

• 如果有更好用的方法，歡迎指點

  
  
  image.png

擊由 clearable 屬性生成的清空按鈕時產(chǎn)生的bug

• 在點擊清空按鈕時，繼續(xù)輸入檢索內(nèi)容，這時候發(fā)現(xiàn)沒有繼續(xù)觸發(fā)事件。
  解決方法：點擊清空的叉叉之后，主動觸發(fā)失去焦點。@clear="setBlur()"