Vue实现web分页组件详解

时间：2021-05-26

本文实例为大家分享了Vue实现web分页组件的具体代码，供大家参考，具体内容如下

效果演示

源代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试分页 - /vue/dist/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { // 省略的符号 sign:'...', // 省略号位置 signIndex:4, // 总页数 totalPageCount: 4, // 当前页 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() } }, 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 (var i=starNum;i<starNum+6;i++) { tmp = {key:i, value:i } that.pagingList.push(tmp) } } else { var starNum = that.currentPage - 1; for (var 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 (var 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() } }) </script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章