travel-admin/src/components/frame/c-pages.vue

<template>
  <div id="c-pages">
    <el-row justify="center" class="c-pages" v-loading="loading">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :page-sizes="[10, 20, 50, 100, 200]"
        :total="total"
        :page-size="limit"
        v-model:current-page="currentPage"
        @current-change="changePage"
        @size-change="sizeChange"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

<script setup lang="ts">
// 基础
import type { Ref } from 'vue';
import { onMounted, ref, toRefs } from 'vue';

const props = defineProps({
  total: { type: Number, default: () => 0 },
  limit: { type: Number, default: () => 10 }
});
const { total } = toRefs(props);
const { limit } = toRefs(props);

const emit = defineEmits(['toSelect', 'query']);

// 加载中
const loading: Ref<any> = ref(false);

const currentPage: Ref<number> = ref(1);

// 分页
const changePage = (page: number = currentPage.value) => {
  emit('query', { skip: (page - 1) * limit.value, limit: limit.value });
};
const sizeChange = (limits: number) => {
  console.log(limits);
};

// 请求
onMounted(async () => {
  loading.value = true;

  loading.value = false;
});
</script>
<style scoped lang="scss"></style>