Vue3+setup+el-pagination+el-select封装下拉分页及懒加载

vue2下拉分页

<template>  
  <div>  
    <el-select v-model="selected" placeholder="请选择" @visible-change="handleDropdownVisibility">  
      <el-option  
        v-for="item in options"  
        :key="item.value"  
        :label="item.label"  
        :value="item.value">  
      </el-option>  
      <el-option  
        value="more"  
        disabled  
        @click.native.prevent="showDialog = true"  
        style="cursor: pointer;">  
        更多选项...  
      </el-option>  
    </el-select>  
    <el-dialog  
      title="选择选项"  
      :visible.sync="showDialog"  
      width="30%">  
      <div v-for="group in paginatedOptions" :key="group.page">  
        <p>第 {
  { group.page }} 页</p>  
        <el-option  
          v-for="item in group.items"  
          :key="item.value"  
          :label="item.label"  
          :value="item.value"  
          @click="selectOption(item.value); showDialog = false;">  
        </el-option>  
      </div>  
      <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="totalItems">  
      </el-pagination>  
    </el-dialog>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      selected: null,  
      showDialog: false,  
      currentPage: 1,  
      pageSize: 10,  
      totalItems: 100, // 假设总项数为100  
      allOptions: [], // 这里应该包含所有选项，通过API或其他方式加载  
      paginatedOptions: [], // 分页后的选项  
    };  
  },  
  computed: {  
    options() {  
      // 这里可以返回一些初始选项，或者空数组  
      return [];  
    },  
  },  
  methods: {  
    handleDro