vue-paginate分页组件 源代码：
npm i vue_pageination --save // 局部使用，哪个组件使用就引入 import pageination from 'vue_pageination'; Vue.use(pageination); // template中写入 <pageination :total="50" :size="size" :page="10" :changge="pageFn" :isUrl="true"></pageination> // props对象传值 props: ['total', 'size', 'page', 'changge', 'isUrl'] // data数据 data(){ return { pageinationTotal: this.total,//总条目数 pageinationSize: this.size ? this.size : 10,//每页显示条目个数 pageinationLength: [], pageinationCurrentPage: this.page ? this.page : 1,//当前页数默认1 pageinationPage: 0,//可分页数 startDisabled: true,//是否可以点击首页上一页 endDisabled: true,//是否可以点击尾页下一页 pageChangge: this.changge,//修改方法 pageIsUrl: this.isUrl ? true : false,//是否开启修改url } }, // 计算可分页数 this.pageinationPage = Math.ceil(this.pageinationTotal / this.pageinationSize);//取整有小数往上+1 // 页码计算 //是否可以点击上一页首页 this.startDisabled = this.pageinationCurrentPage != 1 ? false : true; //是否可以点击下一页尾页 this.endDisabled = this.pageinationCurrentPage != this.pageinationPage ? false : true; //重置 this.pageinationLength = []; //开始页码1 let start = this.pageinationCurrentPage - 4 > 1 ? this.pageinationCurrentPage - 4 : 1; //当前页码减去开始页码得到差 let interval = this.pageinationCurrentPage - start; //最多9个页码，总页码减去interval 得到end要显示的数量+ let end = (9 - interval) < this.pageinationPage ? (9 - interval) : this.pageinationPage; //最末页码减开始页码小于8 if ((end - start) != 8) { //最末页码加上与不足9页的数量，数量不得大于总页数 end = end + (8 - (end - start)) < this.pageinationPage ? end + (8 - (end - start)) : this.pageinationPage; //最末页码加上但是还不够9页，进行开始页码追加，开始页码不得小于1 if ((end - start) != 8) { start = (end - 8) > 1 ? (end - 8) : 1; } } for (let i = start; i <= end; i++) { this.pageinationLength.push(i); } // html代码 <div @click="pageUp(0)" class="pagination_page" :class="startDisabled?'disabled':''">首页</div> <div @click="pageUp(1)" class="pagination_page" :class="startDisabled?'disabled':''">上一页</div> <div class="pagination_page" :class="item==pageinationCurrentPage?'pagination_page_active':''" v-for="item in pageinationLength" @click="jump(item)"> {{item}} </div> <div @click="pageDown(1)" class="pagination_page" :class="endDisabled?'disabled':''">下一页</div> <div @click="pageDown(0)" class="pagination_page pagination_page_right" :class="endDisabled?'disabled':''">尾页</div> // 返回当前页码 pageCurrentChange(){ this.pageChangge(this.pageinationCurrentPage); } // 方法调用 changge：页码切换方法触发，比如：传入pageFn方法接收page页码 pageFn(val){ this.page = val; }HTML代码
<div id="paginate" v-cloak> <ul class="pagination"> <li> <a v-if="currentPage == 1">首页</a> <a v-else href="javascript:;" @click="next(1)">首页</a> </li> <li v-if="currentPage<=1"> <a>上一页</a> </li> <li v-else> <a href="javascript:;" @click="next(currentPage-1)">上一页</a> </li> <li v-for="(item, index) in pagingList" :key="index"> <a v-if="currentPage==item.key || sign ==item.key && currentPage>1">{{item.key}}</a> <a v-else href="javascript:;" @click="next(item.value)">{{item.key}}</a> </li> <li v-if="currentPage>=totalPageCount"> <a>下一页</a> </li> <li v-else> <a href="javascript:;" @click="next(currentPage+1)">下一页</a> </li> <li> <a v-if="totalPageCount == currentPage">尾页</a> <a v-else href="javascript:;" @click="next(totalPageCount)">尾页</a> </li> </ul> <p> 共:{{totalPageCount||0}}页,当前页为第{{currentPage||0}}页 设置总页数: <input style="width:20px;" v-model="totalPageCount"> </p> </div>CSS代码
// 粗略版，需要自己美化 <style> #paginate { width: 500px; height: 200px; margin: 0 auto; text-align: center; background-color: #cccccc; } #mylink { color: #efefef; } .pagination { list-style: none; text-align: center; height: 50px; padding-top: 50px; } .pagination > li { float: left; margin: 0 5px; } [v-cloak] { display: none; } </style>data中的数据
data () { return { // 省略的符号 sign: '...', // 省略号位置 signIndex: 4, // 总页数 totalPageCount: 10, // 当前页 currentPage: 1, // 显示在页面的数组列表 pagingList: [] } }监听器
watch: { totalPageCount (val) { var that = this if (!val || val === '') return that.currentPage = 1 that.init() }, currentPage (val) { var that = this that.init()mounted函数
methods: { // 跳转到某页码 next (num) { var that = this if (num <= 1) that.currentPage = 1 else if (num >= that.totalPageCount) { that.currentPage = that.totalPageCount } else that.currentPage = num }, // 初始化数据 fetchData () { var that = this that.pagingList = [] var tmp = null if (that.totalPageCount > 6) { if ( that.totalPageCount - 1 === that.totalPageCount - that.currentPage && that.totalPageCount - that.currentPage > 5 ) { for (var i = 1; i < 7; i++) { if (i < that.signIndex) { tmp = { key: i, value: i } } else if (i === that.signIndex) { tmp = { key: that.sign, value: 0 } } else if (i === that.signIndex + 1) { tmp = { key: that.totalPageCount - 1, value: that.totalPageCount - 1 } } else { tmp = { key: that.totalPageCount, value: that.totalPageCount } } that.pagingList.push(tmp) } } else if (that.totalPageCount - that.currentPage <= that.signIndex) { var starNum = that.totalPageCount - 5 for (i = starNum; i < starNum + 6; i++) { tmp = { key: i, value: i } that.pagingList.push(tmp) } } else { let starNum = that.currentPage - 1 for (i = 1; i < 7; i++) { if (i < that.signIndex) { tmp = { key: starNum - 1 + i, value: starNum - 1 + i } } else if (i === that.signIndex) { tmp = { key: that.sign, value: 0 } } else if (i === that.signIndex + 1) { tmp = { key: that.totalPageCount - 1, value: that.totalPageCount - 1 } } else { tmp = { key: that.totalPageCount, value: that.totalPageCount } } that.pagingList.push(tmp) } } } else { for (i = 0; i < that.totalPageCount; i++) { tmp = { key: i + 1, value: i + 1 } that.pagingList.push(tmp) } } }, init () { var that = this that.fetchData() } }挂在执行
mounted () { var that = this that.init() }引入组件
import paginate from '../components/paginate.vue'注入组件js components: { paginate } **使用组件**js
转载于:https://www.cnblogs.com/zjh-study/p/10650264.html
相关资源：Vue分页组件.vue