vue+element UI分页的使用方法

这篇仅对于刚入行前端的小伙伴，大佬勿喷，技术比较菜，哪里写的不对也请指正

首先第一步当然少不了我们的分页组件

<el-pagination:current-page="page_options.page"
:page-size="page_options.page_size"
:total="page_options.total"
background
:pager-count="5"layout="prev, pager, next"@current-change="handleCurrentChange" />

先来介绍一下这几个参数的用法

官方文档也有更多的说明，有需要可以去官网自行查看

然后我们需要在data里面添加绑定值

page_options: {page: 1,page_size: 6,total: 0,},

1代表从第一页开始，6代表一页显示6条数据，total初始值先将他设置为0

下面我们开始使用

getRegister(page) { //这里的page用于接收翻页时调用传递的参数const params = {pageSize: this.page_options.page_size, //此处为后端分页要求的传参字段，根据实际情况改，并传入上面绑定的对应值page: page || 0, //此处就把括号内传递的值写在这里，没有的时候赋0patientIdHis: this.detail.brid, //接口需要请忽略};API.getRegister(params).then((res) => {this.register = res.data.data.content;//接口参数表格需要渲染的值根据实际情况编辑this.page_options.page = res.data.data.number + 1;//给page_options.page赋值，此处字段后端返回值告诉你一般默认值第一页会是0所以需要加1this.page_options.total = res.data.data.totalElements;//这里是后端返回的总条目数，初始值因为不知道有多少所以前面赋值为0，在接口返回后重新赋值即可，字段名根据实际接口字段填写即可});},//下面这一段就是翻页需要用到的handleCurrentChange(page) {this.getRegister(page - 1); //一定要按括号里面的方式进行写},

具体的用法都写在上面代码注释中了，有不明白的地方可以评论留言，哪里写的不对或者写错的地方也请指出，大家共同进步，后续我会再写一篇uniapp上拉加载的文章，有需要可以关注后续

vue+element UI分页的使用方法相关推荐

【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【vue开发问题-解决方法】（五）vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function
[vue开发问题-解决方法](五)vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function 参考文章: (1)[vue开发问题-解决方法](五) ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
VUE element ui 动态合并单元格问题
** VUE element ui 动态合并单元格问题** 1.基础方法 //最开始从网上找到了一个基本的可以同时兼顾行和列的方法,时间太久忘记出自哪里了.如下: //效果 //绑定 :span-me ...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
vue element Pagination分页组件二次封装
vue+element 的分页组件封装 1.在components中创建GlobalPagination文件夹,代码如下 <template><div :class="{' ...

vue+element UI分页的使用方法

vue+element UI分页的使用方法相关推荐

最新文章

热门文章