基于vue3+饿了么的！超级好用的！分页组件

pagination.vue

<template>
  <div class="pagination">
    <el-pagination
      background
      :layout="layout"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :total="pageTotal"
      v-model:currentPage="currentPages"
      @size-change="sizeChange"
      @current-change="current"
      @prev-click.capture="prev"
      @next-click.capture="next"
      :disabled="isPaginationEnabled"
    ></el-pagination>
  </div>
</template>
 
<script setup>
import { ref, reactive } from "vue";
const props = defineProps({
  pageTotal: {
    type: Number,
    default: 0, //总页数
  },
  layout: {
    type: String,
    default: " total, sizes, prev, pager, next, jumper, ->, slot", //分页组件会展示的功能项
  },
  pageSizes: {
    type: Array,
    default: () => {
      return [30,60,90,120]; //指定分页展示条数
    },
  },
  currentPage: {
    type: Number,
    default: 1, //指定跳转到多少页
  },
  pageSize: {
    type: Number,
    default: 30, //每页展示的条数，根据自己实际，且会带入请求
  },
  pageNum: {
    type: Number,
    default: 1, //第几页数据，根据自己实际，且会带入请求
  },
  isPaginationEnabled: {
    type:Boolean,
    default:false
  }
});
 
let currentPages = ref(props.currentPage);
let pageData = reactive({
  pageSize: props.pageSize,
  pageNum: props.pageNum,
});
 
const emit = defineEmits(["pageFunc"]);
 
//选择每页显示数量 Change page size
const sizeChange = (val) => {
  pageData.pageSize = val;
  emit("pageFunc", pageData);
};
//选择某一页
const current = (val) => {
  pageData.pageNum = currentPages.value;
  emit("pageFunc", pageData);
};
//上一页
const prev = () => {
  // pageData.pageNum = pageData.pageNum - 1;
  emit("pageFunc", pageData);
};
//下一页
const next = () => {
  // pageData.pageNum = pageData.pageNum + 1;
  emit("pageFunc", pageData);
};
</script>
 
<style scoped lang="less">
.pagination {
  width: 100%;
  padding: 20px 0;
  text-align: center;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  :deep(.el-input) {
    margin:0;
}
}
</style>

使用示例

<div class="list">
        <pagination-vue :page-size="page.pageSize" :page-sizes="page.pageSizes" :layout="page.layout"
            :current-page="page.pageNum" :pageTotal="page.total" @pageFunc="pageFunc">
        </pagination-vue>
</div>

<script lang="js" setup>
import PaginationVue from "@/components/Pagination.vue";

// 放置页码及相关数据
const page = reactive({
    layout: "total,sizes,prev,pager,next,jumper, ->, slot", // 分页组件会展示的功能项
    pageNum: 1, // 当前页
    pageSize: 30, // 每页条目数
    pageSizes: [10, 30, 60, 90],  // 每页条目数
    total: 0, // 记录总数
    totalPage: 1 // 页数
});

const query = async (pageNum, pageSize) => {
    loadingTable.value = true
    try {
        const res = await searchMerchantIncome("参数");
        loadingTable.value = false
        if (res.data.code === 0) {
            tableData.value = id2name(res.data.data)
            page.total = res.data.count
        }
    } catch (error) {
        loadingTable.value = false
        ElMessage({
            message: error,
            type: "error",
            duration: 1000
        });
    }
    return
}

// 分页请求
const pageFunc = (data) => {
    page.pageSize = data.pageSize; // 每页条数
    page.pageNum = data.pageNum; // 多少页
    query(page.pageNum, page.pageSize);
};

</script>