vue加element ui弹窗(Vue中ElementUI分页组件Pagination的使用方法)
类别:编程学习 浏览量:1949
时间:2022-01-20 00:25:25 vue加element ui弹窗
Vue中ElementUI分页组件Pagination的使用方法Vue中ElementUI分页组件Pagination的使用,供大家参考,具体内容如下
一、概要
ElementUI 提供了 el-pagination 组件,只要配置相应得参数和事件,即可实现分页。
二、实现
1、基本用法
<li class="pagination"> <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="tablePage.pageNum" :page-size="tablePage.pageSize" :page-sizes="pageSizes" :total="tablePage.total" @size-change="handleSizeChange" @current-change="handlePageChange" /> </li>
data() { return { tablePage: { pageNum: 1, // 第几页 pageSize: 10, // 每页多少条 total: 0 // 总记录数 }, pageSizes: [10, 20, 30] } }, methods: { handlePageChange(currentPage) { this.tablePage.pageNum = currentPage // 在此刷新数据 }, handleSizeChange(pageSize) { this.tablePage.pageSize = pageSize // 在此刷新数据 } }
2、后端分页的实现
实现思路:向后台发送请求,传入pageNum、pageSize两参数,直接得到相应的分页数据。
// 获取数据 getData() { let param = { pageNum: this.tablePage.pageNum, pageSize: this.tablePage.pageSize } // 请求后台接口函数 getDataApi(param, { loading: true }).then(res => { // 后台返回数据 this.list = res.data.list this.tablePage.total = res.data.total }) },
3、前端分页的实现
实现思路:向后台发送请求,获取全部数据,前端通过pageNum、pageSize对数据进行处理,最终得到相应的分页数据。以下是处理数据得两种方法:
1、利用 Array.slice 截取想要的数组片段( 此方法要考虑 总页数为“1” 和 尾页 的情况)
2、利用 Array.filter 过滤出想要的数组片段(此方法无需考虑 总页数为“1” 和 尾页 的情况,只要满足条件即可
/** * 分页数据处理 * @param data [Array] 需要分页的数据 * @param num [Number] 当前第几页 * @param size [Number] 每页显示多少条 */ getList(data, num, size) { let list, total, start, end, isFirst, isLast total = data.length isFirst = total < size isLast = Math.ceil(total / size) === num start = (num - 1) * size end = isFirst || isLast ? start + (total % size) : start + size list = data.slice(start, end) list.forEach((item, index) => { item.seq = index + start }) return list } /** * 分页数据处理 * @param data [Array] 需要分页的数据 * @param num [Number] 当前第几页 * @param size [Number] 每页显示多少条 */ getList(data, num, size) { let list, start, end start = (num - 1) * size end = start + size list = data.filter((item, index) => { return index >= start && index < end }) list.forEach((item, index) => { item.seq = index + start }) return list }
总结:无论是前端分页和还是后端分页,最终都需要拿到两个参数:pageNum(当前页)、pageSize(每页多少条)。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue验证码怎么用(vue验证码组件使用方法详解)
- vue实现双向绑定原理(vue实现双向数据绑定)
- vue计算两个日期差几分钟(vue实现同时设置多个倒计时)
- vuecli打包项目(使用vue-cli创建项目并webpack打包的操作方法)
- vue-cli安装教程学习(Vue新手指南之创建第一个vue-cli脚手架程序)
- vuejs全家桶入门教程交流(Vue全家桶入门基础教程)
- vue 排班安排(vue实现钉钉的考勤日历)
- mongovue的使用
- vue弹窗模板(Vue登录页面的动态粒子背景插件实现)
- vue点击事件动态禁用(vue开发移动端使用better-scroll时click事件失效的解决方案)
- vue图片组件使用方法(Vue图片裁剪组件实例代码)
- vuejs图片缩放裁切(vue+js点击箭头实现图片切换)
- vue的路由模式有几种(Vue 路由返回恢复页面状态的操作方法)
- vue自定义列组件(vue自定义表格列的实现过程记录)
- vue将弹框抽离成组件(vue3 可拖动的左右面板分割组件实现)
- vueelementui三级菜单(vue+element ui实现锚点定位)
- 被骂欺师灭祖,与郭德纲公开叫板,何云伟改名何沄伟,开始画画了(与郭德纲公开叫板)
- 相声转行影帝,被何晴抛弃,甩10年女友闪婚生子,刘威不靠谱情史(相声转行影帝被何晴抛弃)
- 岳云鹏不说相声,改行演员了 网友 快回来说相声(岳云鹏不说相声)
- 乔欣首演古装大女主,颜值演技双在线(乔欣首演古装大女主)
- 于正又推女性古装大剧 杨蓉乔欣演女配,两位女主成 重头戏(于正又推女性古装大剧)
- 乔欣古装女主戏获热度 作为女主,却没吃到红利(乔欣古装女主戏获热度)
热门推荐
- nginx keepalived配置(Nginx+Keepalived实现Web服务器高可用)
- docker运行环境centos(如何在centos的docker里安装jupyter并开放端口)
- python彩色字符视频代码(python将视频转换为全字符视频)
- laravel admin文档(Laravel-添加后台模板AdminLte的实现方法)
- sqlserver乐观锁与悲观锁(sql server中死锁排查的全过程分享)
- 用php实现弹出消息提示框(php弹出提示框的是实例写法)
- placeholder兼容性
- C# File类的操作
- css3伸缩布局及使用方法(利用CSS3的flexbox实现水平垂直居中与三列等高布局)
- dedecms标题加粗方法(DEDECMS教程:去除列表页文章标题加粗标签的方法)