酒店小程序怎么引流_基于vue2的table分页组件完成

基于vue2的table分页组件实现方法       这篇文章主要为大家详细介绍了基于vue2的table分页组件实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

pagination.js:

(function(){
 var template = ' div \
 div {{info}} /div \
 div 每页 select v-on:change="pageschange" v-model="selected" option v-for="item in showpages" {{item}} /option /select 条 /div \
 div ul v-on:click="setpage" \
 li a v-bind: v-on:click="firstPage()" 首页 /a /li \
 li a v-bind: v-on:click="prvePage()" 上一页 /a /li \
 li v-for="index in indexs" v-bind: \
 a v-on:click="btnclick(index)" {{ index 1 "..." : index }} /a \
 /li \
 li a v-bind: v-on:click="nextPage()" 下一页 /a /li \
 li a v-bind: v-on:click="lastPage()"  /a /li \
 /ul /div \
 /div \
 var pagination = Vue.extend({
 template: template,
 pro凡科抠图: ["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;

 img src='../img/' data-toggle="modal"
 data-target="#editSonModal" @click="editSonModal(item,nn)" alt='修改' 
 img src='../img/' data-toggle="modal"
 data-target="#delSonModal" @click="delSonModal(nn)" alt='删除' 
 /td 
 /tr 
 /tbody 
 /table 
 vue-pagination :cur="specificationValCur":all="specificationValAll":info="specificationValInfo" :showpages="specificationValShowpages":selected="specificationValselected"
 v-on:mypage="getPage" v-on:pageschange="getspecificationValShowPages" 
 /vue-pagination 

index.js

 * Created by komi on  0005.

 specificationValselected: 10,//默认每页显示的页数
 specificationValTotalRecond: 1,//总记录数
 specificationValShowpages: [10, 30, 50, 100], //每页显示的页数
 specificationValInfo: "",
 limitTem凡科抠图: [],
 tem凡科抠图:[]//数据源
 watch: {
 tem凡科抠图: "setPage"
 components: {
 'vue-pagination': Pagination
 methods: {
 setPage: function () {
 this.specificationValInfo = "记录数为:" + this.tem凡科抠图.length + "条";
 this.specificationValTotalRecond = this.tem凡科抠图.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.limitTem凡科抠图=this.tem凡科抠图;
 return
 }else {
 var arr = [];
 var a=select*(cur-1);
 var b=select*cur;
 for (var i = a; i i++) {
 if(typeof(this.tem凡科抠图[i])!="undefined"){
 arr[i - a] = this.tem凡科抠图[i]
 this.limitTem凡科抠图 = 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)

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