vue：分页页码组件

如果对你有帮助，请点个赞，谢谢 (●’◡’●)

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script><style type="text/css">.active {background-color: blue;color: white;}.pagination-container{display: flex;flex-direction: row;justify-content: space-between;}.showInfo{}</style></head><body><div id="app"><v-pagination :cur-no="curNo" :total-page="totalPage" :page-size="pageSize" :total-data="totalData" :limit="limit"@on-paging="onPaging"></v-pagination></div><script type="text/javascript">//页码组件! function($) {const template =`<div class="pagination-container"><div class="showInfo">Show {{(currPageIndex - 1) * pageSize + 1}} to {{currPageIndex * pageSize > totalData? totalData : currPageIndex * pageSize}} items，totalData {{totalData}} items</div><div class="btn-container"><button type="button" @click="paging(1)">First</button><button type="button" @click="paging(curNo - 1)">Prev</button><button type="button" v-for="item in pageList" @click="paging(item)" :class="{active:item===curNo}" :key="'$pagination' + item">{{item}}</button><button type="button" @click="paging(curNo + 1)">Next</button><button type="button" @click="paging(totalPage)">Last</button></div></div>`$.component('v-pagination', {name: 'v-pagination',template: template,data: function() {return {}},props: {//数据总数，必填totalData: {type: Number,required: true},//当前页码，必填curNo: {type: Number,required: true},//页大小pageSize: {type: Number,required: false,default: 15},//最大页数totalPage: {type: Number,required: true,},//显示的页码数limit: {type: Number,required: false,default: 5},onPaging: {type: Function,default: function() {return false}}},computed: {//设置这个属性为了便于维护当前页码的特殊情况currPageIndex: function() {if (this.curNo < 1) {return 1;}if (this.curNo > this.totalPage) {return this.totalPage;}return this.curNo;},//动态创建页码数组pageList: function() {const arr = [];let mid = 0,_start = 0,_end = 0;if (this.limit % 2 === 1) { //页码为奇数mid = Math.floor(this.limit / 2);_start = this.curNo - mid;_end = this.curNo + mid;} else { //页码为偶数mid = this.limit / 2;_start = this.curNo - mid;_end = this.curNo + mid - 1; //补差量，-1}if (_start < 1) {_end = _end + (1 - _start);_start = 1;}if (_end > this.totalPage) {_start = _start - (_end - this.totalPage);_end = this.totalPage;}if (_start < 1) {_start = 1;}for (let i = _start; i <= _end; i++) {arr.push(i)}return arr}},methods: {//参数为页码，jump-page为父组件的事件paging: function(curNo) {let me = this;if (curNo < 1) {curNo = 1;}if (curNo > me.totalPage) {curNo = me.totalPage;}//点击当前页，不重复请求，提升效率if (curNo == me.curNo) {return;}this.$emit('on-paging', curNo);}}});}(Vue)</script><script type="text/javascript">const vm = new Vue({el: "#app",data: {curNo: 1,totalPage: 20,pageSize: 10,totalData: 199,limit: 5},methods: {onPaging: function(i) {this.curNo = i;console.log("请求第" + i + "页数据");}}})</script></body>
</html>

vue：分页页码组件相关推荐

Vue分页页码栏设计
Vue分页页码栏设计效果展示 HTML 数据需要函数需要运用效果展示 HTML <div class="page_bar no-select"><ul c ...
vue的页码组件的页码重置为1
首先是页码组件上要绑定一个ref,然后通过ref找到这个组件,然后重置为1, 例子如下: <el-paginationref="Pagination"class=" ...
vue中的自定义分页插件组件
介绍一下,已经有很多的vue分页的组件了,大家都是大同小易,那么我就结合自身的使用,写出了一片文章首先在新建一个分页模块在模块中引入相应的代码,(内有详细的注释) template中 <di ...
项目总结-vue分页组件集成
项目总结-vue分页组件集成后台管理的大部分页面都需要对数据进行分页显示,但是在每个页面都写分页代码太过冗余,而且当分页出现问题时,需要修改每个页面,所以我集成了一个分页组件,在每个页面直接引用这个 ...
vue中elementUi筛选后分页页码恢复到第一页
分页查询的时候,在第4页添加筛选条件查询后.返回了新数据,展示的是第一页数据但分页页码还是第四页.正确应为第1页解决思路:条件筛选后将当前currentPage改为1 1.实现代码 <temp ...
【vue分页功能】vue element 分页组件简简单单实现分页功能详细教学
文章目录 vue分页功能实现一.直接上代码二.需要注意的事项 vue分页功能实现一.直接上代码 // 列表结构 // 重点:data="pageList" <el-ta ...
JavaWeb前端框架VUE和Element组件详解
文章目录前言一.前端框架--VUE 1.1 概述 1.2 快速入门 1.3 Vue 指令 1.3.1 v-bind & v-model 指令 1.3.2 v-on 指令 1.3.3 条件判 ...
VUE常用UI组件插件及框架-vue前端UI框架收集
UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...
基于Vue结合Vant组件库的仿电影APP
Vue综合案例 Vue综合案例一.项目概要 1.效果前瞻 2.开发流程 3.开发环境二.初始化及必要知识点 1.初始化远程仓库 2.创建项目 3.路由规划 4.反向代理配置 5.网络请求封装 6. ...

vue：分页页码组件

vue：分页页码组件相关推荐

最新文章

热门文章