快捷導(dǎo)航

vue中el-autocomplete與el-select的異同

更新時(shí)間：2022年05月29日 10:48:39 作者：答案cp3

本文主要介紹了vue中el-autocomplete與el-select的異同，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

最近項(xiàng)目里面需要使用到下拉框的遠(yuǎn)程搜索，我這邊使用的是el-select，其實(shí)查看文檔我們可以得知，還可以使用el-autocomplete來(lái)實(shí)現(xiàn)遠(yuǎn)程搜索。

那么它們具體有何異同呢？今天我們來(lái)看看。

異同

el-autocomplete

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

我們要把請(qǐng)求到的下拉列表通過(guò)callback返回（列表的每一項(xiàng)以key為value的形式傳，也可以通過(guò)value-key換成其它key）。

代碼如下：

    <el-autocomplete
      v-model="value"
      :fetch-suggestions="querySearchAsync"
      placeholder="請(qǐng)輸入內(nèi)容"
    ></el-autocomplete>
    
    export default {
     data () {
         return {
           value: ''
         }
     },
     methods: {
        querySearchAsync (queryString, cb) {
          setTimeout(() => {
            cb([{value: '答案cp3'}])
          }, 200)
        }
    }

可以看到el-autocomplete實(shí)時(shí)輸入的時(shí)候，value也是實(shí)時(shí)變化的，并且，你選中選項(xiàng)，再次拉起選項(xiàng)的時(shí)候，不會(huì)有選中的效果。

所以el-autocomplete可以理解為輸入建議的組件。

el-select

el-select的遠(yuǎn)程搜索是通過(guò)remote-method來(lái)實(shí)現(xiàn)。當(dāng)你輸入的時(shí)候，會(huì)調(diào)用remote-method對(duì)應(yīng)的方法來(lái)實(shí)現(xiàn)。參數(shù)是傳入當(dāng)前輸入的value值。

然后我們請(qǐng)求后，把el-select的option賦值就可以了。

代碼如下：

    <el-select
      v-model="value"
      filterable
      remote
      reserve-keyword
      placeholder="請(qǐng)輸入關(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 = []
          }
        }
    }

el-select輸入的時(shí)候value不會(huì)實(shí)時(shí)變化，而是你要選擇下面的option才會(huì)變化。

然后它選中了，下次打開(kāi)會(huì)有選中的效果。

總結(jié)

el-autocomplete主要是針對(duì)輸入建議，value會(huì)實(shí)時(shí)刷新，選中不會(huì)有選中效果。
el-select value不會(huì)實(shí)時(shí)刷新，選中才會(huì)更新value，并且選中會(huì)有選中效果。

到此這篇關(guān)于vue中el-autocomplete與el-select的異同的文章就介紹到這了,更多相關(guān)el-autocomplete與el-select內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: