首頁 > 軟體

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

2022-05-29 18:00:10

前言

最近專案裡面需要使用到下拉框的遠端搜尋,我這邊使用的是el-select,其實檢視檔案我們可以得知,還可以使用el-autocomplete來實現遠端搜尋。

那麼它們具體有何異同呢?今天我們來看看。

異同

el-autocomplete

el-autocomplete是使用fetch-suggestions方法實現,當輸入的時候,會呼叫我們提供的方法,傳入的引數是輸入的value,以及callback。

我們要把請求到的下拉選單通過callback返回(列表的每一項以key為value的形式傳,也可以通過value-key換成其它key)。

程式碼如下:

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

可以看到el-autocomplete實時輸入的時候,value也是實時變化的,並且,你選中選項,再次拉起選項的時候,不會有選中的效果。

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

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 = []
          }
        }
    }

el-select輸入的時候value不會實時變化,而是你要選擇下面的option才會變化。

然後它選中了,下次開啟會有選中的效果。

總結

  • el-autocomplete主要是針對輸入建議,value會實時重新整理,選中不會有選中效果。
  • el-select value不會實時重新整理,選中才會更新value,並且選中會有選中效果。

到此這篇關於vue中el-autocomplete與el-select的異同的文章就介紹到這了,更多相關el-autocomplete與el-select內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com!


IT145.com E-mail:sddin#qq.com