完整分页器最骚的讲解（亲测）

咱也不敢问，咱也不敢说。先来个图瞅瞅分页器是个什么鬼叭

就目前来讲，这应该算是功能最全的分页器啦吧

下面我们一步一步研究一下这玩意怎么玩叭

啥也不说了，先去element-ui官网嫖代码吧哈哈哈

    <el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage4":page-sizes="[100, 200, 300, 400]":page-size="100"layout="total, sizes, prev, pager, next, jumper":total="400"></el-pagination>

宝贝们应该注意到了最上面的两个@了吧。。没错，这是两个点击事件。我们也去把他的方法嫖下来吧

  methods: {handleSizeChange(val) {console.log(`每页 ${val} 条`);},handleCurrentChange(val) {console.log(`当前页: ${val}`);}}

接下来我们就先了解了解他的身体结构吧

@size-change：pageSize 改变时会触发，就是点击你想看的那一页
@current-change：currentPage 改变时会触发，就是点击选择页面中显示几条数据
:current-page：当前页数
:page-sizes：每页显示个数选择器的选项设置
:page-size：每页显示条目个数
layout：组件布局，子组件名用逗号分隔
:total：总条目数

然后在给他动个小小的手术，略微修改让他更容易看得懂啦

      <!-- 分页 --><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="info.pagenum":page-sizes="[5, 10, 15, 20]":page-size="info.pagesize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination>

  data() {return {// 当前页数，显示数目info: {pagenum: 1,pagesize: 5,},// 总数目total: 0,}},

  methods: {// 当前点击的页面 点击事件handleSizeChange(val) {console.log(`每页 ${val} 条`);// 进行赋值 val是默认传回来的参数，是我们当前点击的那一页数字this.info.pagesize = val// 调用获取数据的函数this.getTableData()},// 每页条数选择的 点击事件handleCurrentChange(val) {console.log(`当前页: ${val}`);// 进行赋值 val是默认传回来的参数，是我们当前点击的那个数字，就是要显示的条数this.info.pagenum = val// 调用获取数据的函数this.getTableData()},},

好的，到这里我们就可以去自己的项目中写一个这样的分页器啦，直接复制上面代码，然后改一下调用获取数据的函数即可，一般情况接口中给了我们总条数的total数据，没有的话就用数据个数（data.length()）也行

完整分页器最骚的讲解（亲测）相关推荐

mysql8.2安装教程_mysql 8.0.22压缩包完整安装与配置教程图解(亲测安装有效)
1.下载zip安装包点击此处下载MySQL server 8.0.22压缩包下载后直接解压即可 2.解压,并配置环境变量 2.1 解压zip包到安装目录,我的解压在了D:MySQLmysql-8. ...
openstack mitaka 完整安装详细文档（亲测，花了3天时间）
openstack 官方文档安装系统版本 centos7 (最小化安装即可) 2台机器内存2g(控制节点建议可以给到4-6g,因为2g我试验起来感觉比较卡顿,dashboard感觉反应有些缓慢), ...
一步一步教你如何在GitHub上上传自己的项目,亲测有效无bug,
直接在github 仓库中 add file 添加自己的文件 ###################################### 本地 git 仓库的建立修改删除命令 git conf ...
bat脚本常用命令及亲测示例代码超详细讲解
这篇文章主要介绍了bat脚本常用命令及亲测示例代码超详细讲解,在这里需要注意编辑bat文件请使用ANSI编码,不然容易出现中文乱码,需要的朋友可以参考下目录一 1.语句注释 2.暂停 3.输出和换行 ...
二代身份证读卡插件安装包（完整亲测可用）.zip
分享最新2022年的二代身份证读卡插件安装包通用型二代身份证读卡器驱动,适应大部分身份证读取设备,包含64位.32位驱动程序. 实现在web浏览器中采用https协议读取身份证信息,兼容多种浏览器. ...
STM32入门级别代码：对步进电机的控制（原理+亲测+对代码及原理讲解）
动,首先呢,我再次声明一下呢我本身专业没有开有关STM32的课程,是我花费近3个月 Hello,小伙伴们,大家好.你现在是不是很急切的想找一个拿来直接用的代码来完成手底下的设计,哈哈哈,先别慌慌吗,别 ...
讲解虚拟服务器的书_亲测竞价虚拟教育项目暴利竞价实战玩法
亲测竞价虚拟教育项目暴利竞价实战玩法黄岛主蓝海项目:亲测竞价虚拟教育项目+寻找暴利竞价虚拟项目实战玩法[价值3980元] 那么在2020年里,为了感谢以前小伙伴的支持,这次我将分享市场和流量是母婴项 ...
最新哔哩bilibili视频弹幕播放器源码+完整无错带后台/亲测
正文: 最新哔哩bilibili视频弹幕播放器源码+完整无错带后台/亲测,此款播放器源码添加及修复了很多功能,且所有源码均本地化,不存在外链的情况,测试环境:PHP7.0+MySQL5.6 播放器跨域 ...
Spoon/Kettle 连接sqlserver数据库遇到的问题（亲测可用，图文讲解）
本文涉及到的错误: Spoon/Kettle 连接sqlserver数据库遇到的问题 (亲测可用,图文讲解) [IM002][Microsoft][ODBC 驱动程序管理器]未发现数据源名称并且未指定 ...

完整分页器最骚的讲解（亲测）

完整分页器最骚的讲解（亲测）相关推荐

最新文章

热门文章