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多个对象实现双向数据绑定(利用js实现Vue2.0中数据的双向绑定功能)
- spring boot docker部署(docker部署springboot和vue项目的实现步骤)
- vue实现展开动画(Vue组件实现旋转木马动画)
- vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)
- vue中的watch属性(vue Watch和Computed的使用总结)
- vue怎么配置到idea(idea编译器vue缩进报错问题场景分析)
- vue3组件通讯消息(Vue3实现Message消息组件示例)
- vuetable表格合并(vue-table实现添加和删除)
- vue 为什么要使用key(详解vue中v-for的key唯一性)
- vue过滤器filters怎么用(如何使用vue过滤器filter)
- vue各组件如何引用(Vue局部组件数据共享Vue.observable的使用)
- springboot如何解析vue登录参数(SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解)
- elementui和vue详解(Vue+Element UI实现概要小弹窗的全过程)
- vue.js开发网站的关键技术(Vue.js项目前端多语言方案的思路与实践)
- vue 网页打印(vue打印功能实现的两种方法总结)
- vuex中action的值怎么接(vuex中Getter的用法详解)
- 《傲骨之战》剧终 律政女魔头Diane,为什么是大女主天花板(傲骨之战剧终律政女魔头Diane)
- 汉族(汉族的祖先是谁)
- 中国有几个名族(中国有几个民族没列入56个民族)
- 数学语文题目(语文的数学题)
- 香蕉(香蕉三种人不宜吃)
- 没钱可以快乐吗(没钱也能快乐吗)
热门推荐
- 后端ui框架排名(前后端结合实现amazeUI分页效果)
- mysql5.7.20非安装版教程(MySQL5.5 部署的一个问题)
- 如何提升网站在移动端的打开速度
- nginx如何配置不显示nginx名字(Nginx安装完成没有生成sbin目录的解决方法)
- jquery中serialize方法对空格的处理
- html正则表达式案例(关于html字符串正则判断和匹配的具体使用)
- mysql提高分页效率(MySQL优化教程之超大分页查询)
- nginx跨域怎么用(如何利用map实现Nginx允许多个域名跨域)
- mysql安装失败原因和解决方法(MySQL MGR搭建过程中常遇见的问题及解决办法)
- apache有几个配置文件linux系统(linux下使用Apache搭建文件服务器的步骤)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9