全国服务热线:4008-888-888

公司新闻

酒店小程序怎么引流_基于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)

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




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服