前端elementUI?select選擇器實現(xiàn)遠程搜索

更新時間：2022年05月31日 17:24:27 作者：把蘋果咬哭的測試筆記

這篇文章主要為大家介紹了前端使用elementUI?select選擇器實現(xiàn)遠程搜索，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

elementUI select選擇器遠程搜索

測試背景

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

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

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

菜鳥用法

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

操作官方示例，感受組件的實際效果，確實是否滿足你需求。
展開示例代碼，關(guān)注使用的字段、方法等。
copy示例代碼，用你實際的數(shù)據(jù)、字段等去替換掉它，直到調(diào)試成功。

<template>
  <el-select
    v-model="value"
    multiple
    filterable
    remote
    reserve-keyword
    placeholder="請輸入關(guān)鍵詞"
    :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應(yīng)該存放我后端接口返回的數(shù)據(jù)，示例里states是列表，我接口返回的也是列表，不過里面元素都是對象，每個對象里存著不同人的信息。

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

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

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

官方參考

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

// mounted()內(nèi)容
        mounted() {
            this.list = this.states.map(item => {
                return { value: `${item.id}`, label: `${item.role_name}-${item.ad_real_name}` };
            });
        },// method()里內(nèi)容
            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 = [];
                }
            },

可是實際執(zhí)行效果是這樣的：

我輸入第一次“張三”，沒結(jié)果。當(dāng)我再輸入一次“張三”，返回出了對應(yīng)的結(jié)果。

我繼續(xù)輸入“李四”，仍然沒結(jié)果，再輸入一次“李四”，結(jié)果出來了......

后來發(fā)現(xiàn)，還是不能直接套用官方示例的，因為示例代碼是直接初始化了數(shù)據(jù)在states里，而我實際是要去請求后端接口才能拿到數(shù)據(jù)。如此一來，當(dāng)我第一次調(diào)用到remoteMethod
方法，實際上this.list是null。當(dāng)我第二次調(diào)用的時候，其實出現(xiàn)的是上一次的查詢結(jié)果。

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

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);

調(diào)試通過，搜索結(jié)果實時展示。

以上就是前端elementUI select選擇器實現(xiàn)遠程搜索的詳細內(nèi)容，更多關(guān)于前端elementUI select遠程搜索的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: