前端elementUI select選擇器實現遠端搜尋

2022-05-31 22:00:09

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遠端搜尋的資料請關注it145.com其它相關文章！

前端elementUI select選擇器實現遠端搜尋

目錄

elementUI select選擇器遠端搜尋

測試背景

菜鳥用法

官方參考

熱門文章