前端elementUI select選擇器實現遠程搜索

Posted on by

elementUI select選擇器遠程搜索

測試背景

先提下背景：就是在測試的過程中，經常需要用到收貨這個功能。在PC端下瞭采購單，再到APP去對應功能裡，再輸入好多個字段，上傳圖片等動作後，終於可以提交。

於是，我決定在平臺上加個小工具，快捷收貨，方便測試用。

那麼，在收貨操作中，要有收貨人這個角色。為瞭更好的適用性，我決定做成一個搜索框，支持實時搜索人員。於是，從elementUI上找到瞭select選擇器 遠程搜索。

菜鳥用法

這裡提一下，前端菜鳥怎麼去用elementUI上的這些組件：

  • 操作官方示例，感受組件的實際效果，確實是否滿足你需求。
  • 展開示例代碼，關註使用的字段、方法等。
  • copy示例代碼，用你實際的數據、字段等去替換掉它，直到調試成功。
<template>
  <el-select
    v-model="value"
    multiple
    filterable
    remote
    reserve-keyword
    placeholder="請輸入關鍵詞"
    :remote-method="remoteMethod"
    :loading="loading">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
<script>
  export default {
    data() {
      return {
        options: [],
        value: [],
        list: [],
        loading: false,
        states: ["Alabama", "Alaska", "Arizona",
        "Arkansas", "California", "Colorado",
        "Connecticut", "Delaware", "Florida",
        "Georgia", "Hawaii", "Idaho", "Illinois",
        "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Maryland",
        "Massachusetts", "Michigan", "Minnesota",
        "Mississippi", "Missouri", "Montana",
        "Nebraska", "Nevada", "New Hampshire",
        "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Ohio",
        "Oklahoma", "Oregon", "Pennsylvania",
        "Rhode Island", "South Carolina",
        "South Dakota", "Tennessee", "Texas",
        "Utah", "Vermont", "Virginia",
        "Washington", "West Virginia", "Wisconsin",
        "Wyoming"]
      }
    },
    mounted() {
      this.list = this.states.map(item => {
        return { value: `value:${item}`, label: `label:${item}` };
      });
    },
    methods: {
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.options = this.list.filter(item => {
              return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          this.options = [];
        }
      }
    }
  }
</script>

從示例代碼裡，可以看出：

states應該存放我後端接口返回的數據，示例裡states是列表，我接口返回的也是列表，不過裡面元素都是對象，每個對象裡存著不同人的信息。

mounted()方法裡面，是在渲染完成後，將states裡的列表數據，進一步處理成一個對象，用map()返回一個新的列表，並且賦值給this.list。

最終在remoteMethod(query)方法裡，根據輸入的傳參query，對this.list裡的數據進行過濾，返回出匹配的數據，賦值到this.options，這樣下拉列表就可以展示結果。

這裡的.indexOf(query.toLowerCase()) > -1，大於-1說明隻要有就行，不論是不是開頭也好，中間也好，或者結尾也好。比如搜“大周”，你輸入“大”或者“周”，都可以搜到。

官方參考

趕緊參考官方示例，滿心歡喜地開始修改代碼：

// mounted()內容
        mounted() {
            this.list = this.states.map(item => {
                return { value: `${item.id}`, label: `${item.role_name}-${item.ad_real_name}` };
            });
        },// method()裡內容
            remoteMethod(query) {
                if (query !== '') {
                    this.loading = true;
                    this.$axios.post("/api/receiveGoodsQuickly/getWmsAdminInfo", {
                        "ad_real_name": query,
                        "mchid": 6001
                    }).then((response) => {
                        this.states = response.data['content'];
                    });
                    setTimeout(() => {
                        this.loading = false;
                        this.options = this.list.filter(item => {
                            return item.label.toLowerCase()
                                .indexOf(query.toLowerCase()) > -1;
                        });
                    }, 1000);
                } else {
                    this.options = [];
                }
            },

可是實際執行效果是這樣的：

我輸入第一次“張三”，沒結果。當我再輸入一次“張三”，返回出瞭對應的結果。

我繼續輸入“李四”，仍然沒結果，再輸入一次“李四”，結果出來瞭……

後來發現，還是不能直接套用官方示例的，因為示例代碼是直接初始化瞭數據在states裡，而我實際是要去請求後端接口才能拿到數據。如此一來，當我第一次調用到remoteMethod
方法，實際上this.list是null。當我第二次調用的時候，其實出現的是上一次的查詢結果。

最終，找到瞭解決辦法，就是在computed增加處理步驟，computed起到偵聽的作用，這樣可以立即得到處理好的數據。

computed: {
            listSet() {
                return this.states.map(item => {
                    return { value: `${item.id}`, label: `${item.role_name}-${item.ad_real_name}` };
                });
            }
        },
 setTimeout(() => {
                        this.loading = false;
                        this.options = this.listSet.filter(item => { // 這裡的this.list，換為this.listSet
                            return item.label.toLowerCase()
                                .indexOf(query.toLowerCase()) > -1;
                        });
                    }, 1000);

調試通過，搜索結果實時展示。

以上就是前端elementUI select選擇器實現遠程搜索的詳細內容，更多關於前端elementUI select遠程搜索的資料請關註WalkonNet其它相關文章！

推薦閱讀：