vue 手写个分页器

最新推荐文章于 2022-09-01 16:33:52 发布
最新推荐文章于 2022-09-01 16:33:52 发布
阅读量289 收藏
点赞数
分类专栏： vue 文章标签： python ietar django
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ietar/article/details/121638365
版权

在这里插入图片描述
在这里插入图片描述
v-if=“total_pages >5” 还有上边的Math.min(5, total_pages)
这个5有点magic number了 自用就没改(懒) 超过5页数据就显示… 然后追加最后一页
js
css 如果一定要看这么惨的css

在这里插入图片描述

total_pages:int 总页数
page_num:int 当前页
均在mounted中获取过
this.sort和this.desc顾名思义 这里不重要 略过

应该有办法写a的href 但是暂时还不太会build url with params 就先手写个to_page凑合用
顺便能阻止上一页/下一页越界的跳转

ietar
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue手写分页器
never_stop_study的博客
10-10 755
Vue封装分页器组件
手写分页器组件（vue2）
qq_48113035的博客
04-16 1233
效果图如下： 1.首先要确认参数 currentPage：当前页码；pageSize：每页有多少条数据；pageGroup：连续页码数量； total：数据总数；totalPage：总页数 2.计算总页数，使用 数据总数 / 每页有多少条数据 向上取整即可。（放在computed中自动计算） computed:{ // 共有多少页 otalPage(){ return Math.ceil(this.total / this.pageSize); } .
分页手写纯手写
01-10
分页手写纯手写
手写Vue个人组件库——fl-Pagination分页器
量子前端的博客
07-22 689
Pagination 分页 当数据量过多时，使用分页分解数据。 基础用法 数据较少的效果 数据较多的效果 当总数据量大于50条时会自动呈现如上的第二种效果，可配合maxShowPageCard设置每一组分页的页签量。 同时pageSizeList为必填选项，第一个下标的值即为每页所展示的数量。 <template> <fl-Pagination :total = 80 :maxShowPageCard = 5 :pageSizeList = [8
手写vue分页组件
gswwxyhk的博客
11-28 228
记录 <template> <div class="page"> <nav aria-label="Page navigation" style="text-align:center;"> <ul class="pagination"> <li @click="prePage" :class="pageNo<=1?'disabled':''"> <a a
手写分页器
探鱼不是鱼
12-26 178
<template> <div class="paginationContainer"> <button :disabled="current === 1">上一页</button> <button v-if="startEnd.start > 1" @click="current = 1" :class="{ active: current === 1 }" > 1
Vue实现简单分页器
10-17
主要为大家详细介绍了Vue实现简单分页器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue分页器实现原理详解
10-16
主要为大家详细介绍了Vue分页器实现原理，编写了分页器组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue分页器组件跳转下一页上一页
07-20
使用vue编写的分页器组件，可设置初始页码，支持输入页码跳转
用Vue写一个分页器的示例代码
08-27
本篇文章主要介绍了用Vue写一个分页器的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue手写分页
晚风的博客
10-14 453
效果图如下： 样式可以自己随便设置 html代码： <div class="page-bar"> <ul> <li> <a style="border: none;padding: 6px 8px;" >总共<i>{{ total }}&.
vue 分页组件的实现
weixinmingwo的博客
02-26 345
创建组件 组件内容 <template> <div class="pagination"> <!-- 上 --> <button :disabled="pageNo == 1" @click="$emit('getPageNo', pageNo - 1)"> 上一页 </button> <button v-if="startNumAndEndNum.start > 1
手写一个简单的分页器
qq_18824403的博客
03-13 3181
封装分页器 1. 前言 分页器基本上是任何网站必须要有的一个组件，为什么需要分页器，当后台传入了大量的数据，那么在前端拿到数据，如果直接展示很有可能或造成卡顿，同时消耗过多的内存，给用户带来的浏览效果就不好。所以，分页器的使用可以一次性只展示部分数据，用户可以非常方便的跳转不同的页面来访问内容。虽然现在很多的UI库都有这个组件，使用也非常的方便，但是我们也应该要知道，怎么手写一个分页器。 2. 准备 先搭建一个静态的分页器。效果如下图。 <template> <div cl
vue 手写分页组件
^_^
07-29 479
效果图 初始结构 <template> <div class="xtx-pagination"> <a href="javascript:;" class="disabled">上一页</a> <span>...</span> <a href="javascript:;" class="active">3</a> <a href="javascript:;"&g
Vue3手写分页器
m0_56698268的博客
09-01 1660
vue3实现分页器功能
使用vue写个分页器
最新发布
02-12
在Vue中实现分页功能，可以通过以下步骤实现： 1. 定义分页数据：在Vue的data中定义当前页数、每页数据量、总数据量等分页数据。...该示例实现了分页器的基本功能，您可以根据自己的需求进一步扩展它。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值