vue 实现el-select下拉多选及分页的功能

实现el-select下拉多选及分页功能，可以使用 el-select 的 remote 方法结合 el-pagination 组件实现。

首先，需要在 el-select 中添加 multiple 和 remote 属性来开启多选和远程搜索功能：

<el-select
  v-model="selectedItems"
  multiple
  remote
  filterable
  :remote-method="remoteMethod"
  :loading="loading"
  :options="items"
  :disabled="disabled"
  :clearable="clearable"
  @visible-change="handleVisibleChange"
>
  <template #default="{ option }">
    <span>{{ option.label }}</span>
  </template>
</el-select>

然后，在 data 中定义需要用到的变量：

data() {
  return {
    selectedItems: [],
    items: [],
    currentPage: 1,
    pageSize: 10,
    total: 0,
    loading: false,
    disabled: false,
    clearable: true
  };
}

接着，定义远程搜索的方法 remoteMethod 和分页的方法 handlePageChange：

methods: {
  async remoteMethod(query) {
    this.loading = true;
    const res = await fetch(`https://example.com/api/items?q=${query}`);
    const data = await res.json();
    this.loading = false;
    this.items = data.items;
    this.total = data.total;
  },
  handlePageChange(page) {
    this.currentPage = page;
    this.remoteMethod(this.$refs.select.inputValue);
  }
}

最后，在 el-pagination 组件中使用 handlePageChange 方法来实现分页：

<el-pagination
  :current-page="currentPage"
  :page-size="pageSize"
  :total="total"
  @current-change="handlePageChange"
/>

这样，就可以在 el-select 中实现下拉多选及分页的功能了。