element plus 封装带有分页的下拉选项

你可以使用 Element Plus 中的 `el-select` 和 `el-pagination` 组件来实现带有分页的下拉选项。

首先，你需要在页面中引入 Element Plus 组件库。然后，在你的组件中，你可以使用 `el-select` 组件来创建下拉选项，同时使用 `el-pagination` 组件来实现分页功能。

以下是一个简单的示例代码，其中 `options` 是下拉选项数据，`pageSize` 是每页显示的选项数量，`currentPage` 是当前页码。

<template>
  <div>
    <el-select v-model="selectedOption" placeholder="请选择">
      <el-option v-for="option in displayedOptions" :key="option.value" :label="option.label" :value="option.value"></el-option>
    </el-select>
    <el-pagination :page-size="pageSize" :total="options.length" v-model="currentPage"></el-pagination>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const options = [
      { label: '选项1', value: 'option1' },
      { label: '选项2', value: 'option2' },
      { label: '选项3', value: 'option3' },
      // ...
    ];

    const selectedOption = ref('');
    const currentPage = ref(1);
    const pageSize = 5;

    const displayedOptions = computed(() => {
      const startIndex = (currentPage.value - 1) * pageSize;
      const endIndex = startIndex + pageSize;
      return options.slice(startIndex, endIndex);
    });

    return {
      options,
      selectedOption,
      currentPage,
      pageSize,
      displayedOptions,
    };
  },
};
</script>

在上述代码中，我们使用 `computed` 函数来计算当前页码显示的选项。根据当前页码和每页显示的选项数量，我们可以计算出应该从哪个索引开始和结束，然后使用 `slice` 方法来获取对应的选项。最后，我们将计算得到的选项数组传递给 `el-select` 组件的 `v-for` 指令来渲染下拉选项。同时，我们使用 `el-pagination` 组件来渲染分页器，并且将 `currentPage` 绑定到组件的 `v-model` 属性中，以便在页面上切换页码时更新当前页码。