vue+ElementUI el-select实现下拉列表分页的功能（下拉分页组件---新增多选功能及默认值回显示例）_el-select 分页

在Vue中结合ElementUI实现el-select下拉列表的分页功能，并增加多选功能，可以通过自定义el-select组件来实现。以下是一个简化版的实现方案：

1. 创建一个自定义组件PaginationSelect.vue。
2. 使用el-select和el-option组件来展示下拉列表。
3. 使用分页组件（例如ElementUI的el-pagination）来实现分页功能。
4. 使用multiple属性来实现多选功能。

<template>
  <div>
    <el-select
      v-model="selectedValues"
      multiple
      placeholder="请选择"
      @change="handleChange"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>
 
<script>
export default {
  props: {
    // 初始选中值
    value: {
      type: Array,
      default: () => [],
    },
    // 总数据量
    total: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      options: [], // 当前页的下拉列表选项
      selectedValues: [], // 已选中的值
    };
  },
  watch: {
    value(newValue) {
      this.selectedValues = newValue;
    },
    currentPage(newPage) {
      this.loadOptions(newPage);
    },
  },
  methods: {
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.loadOptions(this.currentPage);
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
    },
    handleChange(newValues) {
      this.$emit('input', newValues);
    },
    loadOptions(page) {
      // 模拟请求数据
      const start = (page - 1) * this.pageSize;
      const end = start + this.pageSize;
      const data = Array.from({ length: this.pageSize }, (_, i) => ({
        value: start + i,
        label: `Option ${start + i}`,
      }));
      this.options = data;
      // 请求数据并处理返回结果，更新options
    },
  },
  created() {
    this.loadOptions(this.currentPage);
  },
};
</script>

在父组件中使用该自定义组件：

<template>
  <div>
    <pagination-select v-model="selectedValues" :total="total"></pagination-select>
  </div>
</template>
 
<script>
import PaginationSelect from './PaginationSelect.vue';
 
export default {
  components: {
    PaginationSelect,
  },
  data() {
    return {
      selectedValues: [],
      tot