修改其他页面
Yann authored at 2025-07-29 05:15:17
1.89 KiB
cube-front
<template>
  <div class="cube-list-pager">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="pageSizes"
      :total="total"
      :layout="layout"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

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

// 定义组件名称
defineOptions({
  name: 'CubeListPager'
});

// 定义组件 props
interface Props {
  total?: number;
  currentPage?: number;
  pageSize?: number;
  pageSizes?: number[];
  layout?: string;
  onCurrentChange?: (page: number) => void;
  onSizeChange?: (size: number) => void;
  onCallback?: () => void;
}

const props = withDefaults(defineProps<Props>(), {
  currentPage: 1,
  pageSize: 10,
  pageSizes: () => [5, 10, 20, 30, 50, 100, 500, 1000],
  layout: 'total, sizes, prev, pager, next, jumper',
  onCurrentChange: () => {},
  onSizeChange: () => {},
  onCallback: () => {}
});

// 内部分页状态
const currentPage = ref(props.currentPage);
const pageSize = ref(props.pageSize);

// 监听 props 变化,同步内部状态
watch(() => props.currentPage, (newVal) => {
  currentPage.value = newVal;
});

watch(() => props.pageSize, (newVal) => {
  pageSize.value = newVal;
});

// 页码变更处理
const handleCurrentChange = (page: number) => {
  currentPage.value = page;
  if (props.onCurrentChange) {
    props.onCurrentChange(page);
  }
  if (props.onCallback) {
    props.onCallback();
  }
};

// 每页显示条数变更处理
const handleSizeChange = (size: number) => {
  pageSize.value = size;
  currentPage.value = 1; // 改变页面大小时重置到第一页
  if (props.onSizeChange) {
    props.onSizeChange(size);
  }
  if (props.onCallback) {
    props.onCallback();
  }
};
</script>

<style scoped>
.cube-list-pager {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>