基于vue3封装一个分页组件

最新推荐文章于 2024-09-17 11:42:54 发布

超人不会飞2021

最新推荐文章于 2024-09-17 11:42:54 发布

阅读量314

点赞数

分类专栏： vue3 vue 组件库文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_48585264/article/details/120545607

版权

本文旨在介绍如何基于Vue3封装一个可复用的分页组件。通过理解分页的本质——分批次查询数据，详细讲解了动态页码计算、页码切换功能的实现，以及如何抽取组件选项和传递最新页码到父组件。最后展示了如何在实际项目中使用这个分页组件。

摘要由CSDN通过智能技术生成

目的：封装一个统一的分页组件，方便复用。

分页的本质：分批次查询数据（基于页码page和每页条数pagesize）,后端接收到分页参数后，会基于这些参数查询数据库，然后基于数据库进行分页：基于SQL语句（select * from user limit n, m）
在这里插入图片描述
落的代码：

<template>
  <div class="xtx-pagination">
    <a @click='changePage(false)' href="javascript:;" :class="{disabled: currentPage===1}">上一页</a>
    <span v-if='currentPage > 3'>...</span>
    <a @click='changePage(item)' href="javascript:;" :class='{active: currentPage===item}' v-for='item in list' :key='item'>{
   {
   item}}</a>
    <span v-if='currentPage < pages - 2'>...</span>
    <a @click='changePage(true)' href="javascript:;" :class='{disabled: currentPage===pages}'>下一页</a