element下拉框遠程加載的一些用法1

1：要求

是一個下拉框，輸入關鍵字時，從接口中讀取關鍵字匹配，不輸入時，下拉框不出現。

效果圖如下：

 若后端將全部數據都返回給前端了，前端又使用的是element框架，那么只需要在下拉框組件中加上   filterable  屬性即可，其他功能可查看屬性需要自行添加

 

template

<el-form-item label="參與人" label-width="120px">
  <el-select
  v-model="form.receivers"
  clearable
  multiple
  filterable
  remote
  reserve-keyword
  placeholder="請輸入參與人"
  style="width: 100%"
  :remote-method="getAttenderList"
  :loading="receiversLoading"
  >
    <el-option
    v-for="item in attenders"
    :key="item.id"
    :label="item.mail"
    :value="item.mail"
    />
  </el-select>
  </el-form-item>

Select的屬性

clearable：是否可以清空選項，默認值是：false。作用：可以一鍵清空

multiple：是否多選，默認值是：false。作用：可以選擇多個

filterable：是否可搜索，默認值是：false。作用：為了啟用遠程搜索，需要將filterable和remote設置為true，同時傳入一個remote-method。remote-method為一個Function

remote：是否為遠程搜索，默認值是：false。作用：為了啟用遠程搜索，需要將filterable和remote設置為true，同時傳入一個remote-method。remote-method為一個Function

reserve-keyword：多選且可搜索時，是否在選中一個選項后保留當前的搜索關鍵詞，默認值是：false。作用：保留關鍵字（我覺得可以不要）

:remote-method="getAttenderList"：遠程搜索方法函數：getAttenderList

:loading="receiversLoading"：是否正在從遠程獲取數據，初始值receiversLoading為false，當receiversLoading為true時，則是加載中的狀態

 

option的屬性

v-for="item in attenders"：在attenders里循環，item為具體的對象

:key="item.id"：循環必須要寫的唯一標志，這個的值為item里id鍵的值

value：選項的值，是存給el-select里的v-model的值。根據具體要求，可存id也可存字段，或者是id與字段的拼接值。主要看后端的需求。

:value="item.mail"：選項的值為item里mail鍵的值

label：選項的標簽，若不設置則默認與 value 相同，下拉框顯示的具體內容

:value="item.mail"：選項的標簽為item里mail鍵的值

 

遠程搜索方法函數：getAttenderList(寫在methods里)，其實就是在調接口的時候傳一個keyword，這個方法是后端寫的，因為后端並沒有把全部數據返回到前端，因此前端不可以進行模糊搜索，只能將關鍵字傳給后端，由后端實現搜索。

async getAttenderList(keyword) {
      this.receiversLoading = true
      const res = await getAttender({ page: 1, pageSize: 10, keyword })
      const { code, data, message } = res
      if (code === 0) {
        this.attenders = data.list
        this.receiversLoading = false
      } else {
        console.log(message)
      }
},

第三行是傳參，pageSize表示，下拉框顯示多少條數據。page應該是表示：顯示第幾頁，這里只能寫1

 

2：注意

代碼沒有寫全，包括import接口，receiversLoading，attenders等的初始化，在哪里調用這個函數：getAttenderList