基于vue2的table分页组件实现方法

基于vue2的table分页组件实现方法

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

pagination.js:

(function(){

var template = '

{{ index < 1 ? "..." : index }} \

'

var pagination = Vue.extend({

template: template,

props: ["cur", "all", "selected", "showpages", "info"],

computed: {

indexs: function () {

var left = 1

var right = this.all

var ar = []

if (this.all >= 11) {

if (this.cur > 5 && this.cur < this.all - 4) {

left = this.cur - 5

right = this.cur + 4

} else {

if (this.cur <= 5) {

left = 1

right = 10

} else {

right = this.all

left = this.all - 9

}

}

}

while (left <= right) {

ar.push(left)

left++

}

if (ar[0] > 1) {

ar[0] = 1;

ar[1] = -1;

}

if (ar[ar.length - 1] < this.all) {

ar[ar.length - 1] = this.all;

ar[ar.length - 2] = 0;

}

return ar

}

},

methods: {

btnclick: function (page) {

this.cur = page;

},

nextPage: function () {

if (this.cur >= this.all) {

this.cur=this.all;

}else{

this.cur++;

}

},

prvePage: function () {

if (this.cur <= 1) {

this.cur=1;

}else{

this.cur--;

}

},

firstPage: function () {

this.cur=1;

},

lastPage: function () {

this.cur=this.all;

},

setButtonClass: function (isNextButton) {

if (isNextButton) {

return this.cur >= this.all ? "page-button-disabled" : ""

}

else {

return this.cur <= 1 ? "page-button-disabled" : ""

}

},

setpage:function () {

this.$emit('mypage', this.cur);

},

pageschange:function () {

this.$emit('pageschange', this.selected);

}

}

})

window.Pagination = pagination

})()

pagination.css:

ul, li {

margin: 0;

padding: 0;

}

.page-bar {

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

float: right;

border-radius: 4px;

}

.page-bar .info{

float: left;

margin-left:16px;

font-size: 16px;

height: 100%;

}

.page-bar .showpages{

float: left;

font-size: 16px;

margin-left: 16px;

height: 100%;

}

.page-bar .showpages .showpages-select{

width: 70px;

margin: 0 10px;

height: 28px

}

.page-bar .pagesbtn{

float: left;

margin-left:16px;

width: 650px;

height: 100%;

}

.page-bar .pagesbtn ul{

text-align: center;

width: 100%;

}

.page-button-disabled {

color:#ddd !important;

}

.page-bar li {

list-style: none;

display: inline-block;

}

.page-bar li:first-child > a {

margin-left: 0;

}

.page-bar a {

border: 1px solid #ddd;

text-decoration: none;

position: relative;

float: left;

padding: 6px 12px;

line-height: 1.42857143;

color: #337ab7;

cursor: pointer;

}

.page-bar a:hover {

background-color: #eee;

}

.page-bar .active a {

color: #fff;

cursor: default;

background-color: #1e7aca;

border-color: #1e7aca;

}

.page-bar i {

font-style: normal;

color: #1e7aca;

margin: 0 4px;

font-size: 12px;

}

index.html:

data-target="#editSonModal" @click="editSonModal(item,nn)" alt='修改'>

data-target="#delSonModal" @click="delSonModal(nn)" alt='删除'>

http://

v-on:mypage="getPage" v-on:pageschange="getspecificationValShowPages">

v-on:mypage="getPage" v-on:pageschange="getspecificationValShowPages">

index.js

/**

* Created by komi on 2017-03-05 0005.

*/

var vm = new Vue({

el: ".main",

data: {

specificationValCur: 1,//当前页

specificationValAll: 1,//总页数

specificationValselected: 10,//默认每页显示的页数

specificationValTotalRecond: 1,//总记录数

specificationValShowpages: [10, 30, 50, 100], //每页显示的页数

specificationValInfo: "",

limitTemps: [],

temps:[]//数据源

},

watch: {

temps: "setPage"

},

components: {

'vue-pagination': Pagination

},

methods: {

setPage: function () {

this.specificationValInfo = "记录数为:" + this.temps.length + "条";

this.specificationValTotalRecond = this.temps.length;

this.setPageBtn();

this.setPageLimit(this.specificationValTotalRecond,this.specificationValselected,1)

},

getPage:function (msg) {

this.specificationValCur=msg;//这里必须,否则按钮无法高亮

this.setPageLimit(this.specificationValTotalRecond,this.specificationValselected,msg)

},

setPageLimit: function (total,select,cur) {//这里为实现分页切换table的主要实现

if(total<=select){

this.limitTemps=this.temps;

return

}else {

var arr = [];

var a=select*(cur-1);

var b=select*cur;

for (var i = a; i < b; i++) {

if(typeof(this.temps[i])!="undefined"){

arr[i - a] = this.temps[i]

}

}

this.limitTemps = arr;

}

console.log("total:"+total+"select"+select+"cur"+cur)

},

setPageBtn: function () {

if (this.specificationValTotalRecond > this.specificationValselected) {

if (this.specificationValTotalRecond % this.specificationValselected == 0) {

this.specificationValAll = this.specificationValTotalRecond / this.specificationValselected

} else {

this.specificationValAll = parseInt(this.specificationValTotalRecond / this.specificationValselected) + 1

}

} else {

this.specificationValAll = 1

}

},

getspecificationValShowPages: function (pages) {

this.specificationValselected = pages;

this.setPageBtn();

this.setPageLimit(this.specificationValTotalRecond,this.specificationValselected,1)

}

}

});

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。