利用element-ui實現(xiàn)遠程搜索兩種實現(xiàn)方式

更新時間：2023年12月09日 12:38:48 作者：前端大鵪鶉

這篇文章主要介紹了利用element-ui的兩種遠程搜索實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

1. 實現(xiàn)效果：

2. 利用el-autocomplete實現(xiàn)遠程搜索

el-autocomplete是使用fetch-suggestions方法實現(xiàn)，當(dāng)輸入的時候，會調(diào)用我們提供的方法，傳入的參數(shù)是輸入的value，以及callback。

把請求到的下拉列表通過callback返回（列表的每一項以key為value的形式傳，也可以通過value-key換成其key）

<el-autocomplete v-model="namenick" :fetch-suggestions="searchNameNick"         
  placeholder="請輸入內(nèi)容" :trigger-on-focus="false" @select="searchNickhandle">
</el-autocomplete>
// :fetch-suggestions="searchNameNick" ： 返回獲取到數(shù)據(jù)的方法，也就是說輸入框一獲取焦點。就會自動調(diào)用該方法拿到數(shù)據(jù)。
// select="handleSelect" ： 當(dāng)選中建議項時，調(diào)用該方法。
async searchNameNick(queryString, callBack){
       //整理參數(shù)
        const params ={
            nickname:queryString,
            sys_code:4,
            page:1,
            page_size:100
        }
        // 定義空數(shù)組來接收返回的數(shù)據(jù)
        let nicknameList = []
        let res = await this.$proxy({
            url: `xxxx`,
            method: 'get',
            params
        })
        if(res.code == 0){
            //如果搜索結(jié)果為空返回“無匹配結(jié)果”
            if(res.data.items.length == 0){
                nicknameList.push({
                    value :"無匹配結(jié)果",
                    id : -1
                })
                callBack(nicknameList)
            }else{
            //對獲取的值進行遍歷，調(diào)整數(shù)據(jù)結(jié)構(gòu)，value
                for (let i = 0; i < res.data.items.length; i++) {
                    //需要注意的是回顯的值必須是一個對象數(shù)組，且對象屬性名稱是 “value”，不然回顯失敗
                    nicknameList.push({
                        value: res.data.items[i].nickname,
                        id: res.data.items[i].user_id
                    })
                }
                clearTimeout(this.timeout)
                this.timeout = setTimeout(() => {
                    callBack(nicknameList)
                    //通過callBack函數(shù)將回顯數(shù)據(jù)返回
                }, 1000)
            }
        }else{
            this.$message({
                type: 'error',
                message: '請求失敗'
            });
        }
    },
     searchNickhandle(item) {
            if (item.id !== -1) {
                console.log(item.id, '昵稱點擊回調(diào)');
                this.user_id = item.id
            }
        },

3. 利用el-select實現(xiàn)遠程搜索

el-select的遠程搜索是通過remote-method來實現(xiàn)。當(dāng)你輸入的時候，會調(diào)用對應(yīng)的remote- method方法來實現(xiàn)。參數(shù)是傳入當(dāng)前輸入的value值。然后我們請求后，把el-select的option賦值就可以了。

<el-select
      v-model="value"
      filterable
      remote
      reserve-keyword
      placeholder="請輸入關(guān)鍵詞"
      :remote-method="remoteMethod"
      :loading="reqLoading"
    >
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    export default {
     data () {
         return {
           value: '',
           reqLoading: false,
           options: []
         }
     },
     methods: {
        remoteMethod (query) {
          if (query !== '') {
            this.reqLoading = true
            setTimeout(() => {
              this.reqLoading = false
              this.options = [{label: '答案cp3',value: '答案cp3'}]
            }, 200)
          } else {
            this.options = []
          }
        }
    }