pet-system-merchant-web/src/components/PageSelect/index.vue

<template>
  <div class="page-select">
    <el-select v-bind="{ ...$attrs, value: undefined }" v-model="localValue" :filterable="true" :remote="true"
      :remote-method="onFilterMethod" @visible-change="handleVisibleChange" @change="handleInput">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      <!-- 分页组件 -->
      <div v-if="total > 0" class="brand-pagination">
        <div class="custom-pagination">
          <span class="page-arrow" :class="{ disabled: currentPage <= 1 }"
            @click="currentPage > 1 && handlePageChange(currentPage - 1)">
            &lt;
          </span>
          <template v-for="page in pageNumbers" :key="page">
            <span class="page-number" :class="{ active: page === currentPage }" @click="handlePageChange(page)">
              {{ page }}
            </span>
          </template>
          <span class="page-arrow" :class="{ disabled: currentPage >= totalPages }"
            @click="currentPage < totalPages && handlePageChange(currentPage + 1)">
            &gt;
          </span>
          <span class="total-text">共{{ total }}条</span>
        </div>
      </div>
    </el-select>
  </div>
</template>

<script setup name="PageSelect" lang="ts">
import { ref, computed, watch } from 'vue';

const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: undefined
  },
  options: {
    type: Array,
    default: () => []
  },
  total: {
    type: Number,
    default: 0
  },
  pageSize: {
    type: Number,
    default: 10
  }
});

const emit = defineEmits(['update:modelValue', 'page-change', 'visible-change', 'filter-method']);

const localValue = ref(props.modelValue);
const currentPage = ref(1);

// 监听modelValue变化
watch(
  () => props.modelValue,
  (newValue) => {
    localValue.value = newValue;
  },
  { immediate: true }
);

// 计算属性：总页数
const totalPages = computed(() => {
  return Math.ceil(props.total / props.pageSize);
});

// 计算属性：页码数组
const pageNumbers = computed(() => {
  const pages = [];
  const total = totalPages.value;
  const current = currentPage.value;

  // 生成页码，最多显示5个页码
  let start = Math.max(1, current - 2);
  let end = Math.min(total, start + 4);

  // 调整起始页码，确保显示5个页码
  if (end - start < 4) {
    start = Math.max(1, end - 4);
  }

  for (let i = start; i <= end; i++) {
    pages.push(i);
  }

  return pages;
});

// 处理输入变化
const handleInput = (value: any) => {
  emit('update:modelValue', value);
};

// 处理可见性变化
const handleVisibleChange = (visible: boolean) => {
  if (visible) {
    currentPage.value = 1;
  }
  emit('visible-change', visible);
};

// 处理页面切换
const handlePageChange = (page: number) => {
  currentPage.value = page;
  emit('page-change', page);
};

// 处理筛选输入变化，重置到第1页
const onFilterMethod = (query: string) => {
  currentPage.value = 1;
  emit('filter-method', query);
};
</script>

<style scoped>
.page-select {
  width: 100%;
}

.brand-pagination {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #ebeef5;
  text-align: center;
}

.custom-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
}

.page-arrow {
  cursor: pointer;
  color: #606266;
  user-select: none;
  padding: 2px 8px;
  transition: color 0.3s;
}

.page-arrow:hover:not(.disabled) {
  color: #409eff;
}

.page-arrow.disabled {
  color: #c0c4cc;
  cursor: not-allowed;
}

.page-number {
  cursor: pointer;
  color: #606266;
  padding: 2px 8px;
  transition: all 0.3s;
}

.page-number:hover {
  color: #409eff;
}

.page-number.active {
  color: #409eff;
  font-weight: bold;
}

.total-text {
  margin-left: 15px;
  font-size: 12px;
  color: #909399;
}
</style>