【Vue2 + ElementUI】PaginationSelect 带分页和搜索功能的下拉列表组件

<template>
  <el-popover
    ref="popover"
    placement="bottom"
    trigger="click"
    v-model="visible"
    popper-class="pagination-select"
  >
    <el-input
      slot="reference"
      :value="selectedLabel"
      readonly
      placeholder="请选择"
    >
      <i slot="suffix" class="el-input__icon el-icon-arrow-down"></i>
    </el-input>
    <div class="pagination-select-header">
      <el-input
        v-model="searchKey"
        size="small"
        placeholder="请输入关键词"
        prefix-icon="el-icon-search"
        @keyup.enter.native="search"
      ></el-input>
    </div>
    <div class="pagination-select-body">
      <div class="options">
        <div
          class="option"
          v-for="(item, index) in options"
          :key="index"
          @click="select(item)"
        >
          {{ item.label }}
        </div>
      </div>
      <div class="pagination-select-footer">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </el-popover>
</template>
 
<script>
export default {
  data() {
    return {
      visible: false,
      searchKey: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      options: [], // 数据源，结构为[{value: '...', label: '...'}, ...]
      selectedValue: '' // 选中项的值
    };
  },
  computed: {
    selectedLabel() {
      const selected = this.options.find(option => option.value === this.selectedValue);
      return selected ? selected.label : '';
    }
  },
  methods: {
    select(item) {
      this.selectedValue = item.value;
      this.visible = false;
      // 触发选择事件
      this.$emit('select', item);
    },
    search() {
      // 根据searchKey进行搜索，更新options和total
      this.currentPage = 1;
      this.loadData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.loadData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadData();
    },
    loadData() {
      // 模拟请求数据
      const params = {
        key: this.searchKey,
        page: this.curren