element-ui的两种远程搜索实现

1. 实现效果：

2. 利用el-autocomplete实现远程搜索

el-autocomplete是使用fetch-suggestions方法实现，当输入的时候，会调用我们提供的方法，传入的参数是输入的value，以及callback。

把请求到的下拉列表通过callback返回（列表的每一项以key为value的形式传，也可以通过value-key换成其key）

<el-autocomplete v-model="namenick" :fetch-suggestions="searchNameNick"         
  placeholder="请输入内容" :trigger-on-focus="false" @select="searchNickhandle">
</el-autocomplete>

// :fetch-suggestions="searchNameNick" ： 返回获取到数据的方法，也就是说输入框一获取焦点。就会自动调用该方法拿到数据。
// select="handleSelect" ： 当选中建议项时，调用该方法。

async searchNameNick(queryString, callBack){
       //整理参数
        const params ={
            nickname:queryString,
            sys_code:4,
            page:1,
            page_size:100
        }
        // 定义空数组来接收返回的数据
        let nicknameList = []
        let res = await this.$proxy({
            url: `xxxx`,
            method: 'get',
            params
        })
        if(res.code == 0){
            //如果搜索结果为空返回“无匹配结果”
            if(res.data.items.length == 0){
                nicknameList.push({
                    value :"无匹配结果",
                    id : -1
                })
                callBack(nicknameList)
            }else{
            //对获取的值进行遍历，调整数据结构，value
                for (let i = 0; i < res.data.items.length; i++) {
                    //需要注意的是回显的值必须是一个对象数组，且对象属性名称是 “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函数将回显数据返回
                }, 1000)
            }
        }else{
            this.$message({
                type: 'error',
                message: '请求失败'
            });
        }
    },
    
     searchNickhandle(item) {
            if (item.id !== -1) {
                console.log(item.id, '昵称点击回调');
                this.user_id = item.id
            }
        },

3. 利用el-select实现远程搜索

el-select的远程搜索是通过remote-method来实现。当你输入的时候，会调用对应的remote- method方法来实现。参数是传入当前输入的value值。然后我们请求后，把el-select的option赋值就可以了。

<el-select
      v-model="value"
      filterable
      remote
      reserve-keyword
      placeholder="请输入关键词"
      :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 = []
          }
        }
    }

4. 总结：

el-autocomplete主要是针对输入建议，value会实时刷新，选中不会有选中效果。
el-select value不会实时刷新，选中才会更新value，并且选中会有选中效果

element-ui的两种远程搜索实现

猜你喜欢