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