分页插件代码:
上一页 1 ... {{num}} ... 下一页 {{pages}} <#-- 跳转到:--> <#----> <#--GO-->
vue 代码
- data: {
- current_page: result.resultObj.number + 1, // 当前页
- pages: result.resultObj.totalPages, // 总页数
- changePage: '',// 跳转页
- nowIndex: 0
- },
- computed: {
- show: function () {
- return this.pages && this.pages != 1
- },
- pstart: function () {
- return this.current_page == 1;
- },
- pend: function () {
- return this.current_page == this.pages;
- },
- efont: function () {
- if (this.pages <= 7) return false;
- return this.current_page> 5
- },
- ebehind: function () {
- if (this.pages <= 7) return false;
- var nowAy = this.indexs;
- return nowAy[nowAy.length - 1] != this.pages;
- },
- indexs: function () {
- var left = 1,
- right = this.pages,
- ar = [];
- if (this.pages>= 7) {
- if (this.current_page> 5 && this.current_page <this.pages -4){
- left = Number(this.current_page) - 3;
- right = Number(this.current_page) + 3;
- } else {
- if (this.current_page <= 5) {
- left = 1;
- right = 7;
- } else {
- right = this.pages;
- left = this.pages - 6;
- }
- }
- }
- while (left <= right) {
- ar.push(left);
- left++;
- }
- return ar;
- },
- },
- methods: {
- jumpPage: function (id) {
- if (id <= this.pages && id>= 1) {
- this.current_page = id;
- loadData(this.current_page - 1, size);
- }
- },
- lessPage: function () {
- this.current_page--;
- loadData(this.current_page - 1, size);
- },
- addPage: function () {
- this.current_page++;
- loadData(this.current_page - 1, size);
- }
- }
使用说明:
直接拷贝即可使用, 只需要修改总页数, 当前页.
来源: https://www.2cto.com/kf/201808/764950.html