新人 记录VUE中分页实现
Posted zhenga
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了新人 记录VUE中分页实现相关的知识，希望对你有一定的参考价值。
关于函数传值
this.getPurchaseHistoryData(index, num,timeType);第一位是显示的页数，第二是控制首页4上一页-1下一页是2末页是5 第三是是对昨天是1，今天是2，还是一段时间的控制传3，默认是0
1.关于分页：
（1）首页是4上一页是-1下一页是2末页是5，单机查询的时候是1
（2）关于pageRecord 函数 currentRecord表示当前页数，showItemRecord表示共⑤页
（3）current >= showItem和else{}是用来显示页数是怎么显示的（这个我也有点蒙主要看看pag数组里的）
（4）从后台接收总页数 附在allpageRecord
（5）传值的时候将 index传 给pageNumber 显示页码
<body> <!--内容区--> <div id="membersShipCard"> <!--店铺收入数据--> <div class="box-body table-responsive"> <div class="box-header" style="padding-left: 0;"> <h3 class="box-title" style=" line-height: 43px;">店铺收入数据</h3> <div class="box-tools" style=" left: 128px;"> <ul class="nav navbar-nav"> <li class="dropdown messages-menu"> <a href="javascript:void(0)" class="sidebar-toggle a" v-on:click="storeRevenue(1)">昨天</a> </li> <li class="dropdown messages-menu"> <a href="javascript:void(0)" class="sidebar-toggle" v-on:click="storeRevenue(2)">今天</a> </li> <li class="dropdown messages-menu"> <a href="javascript:void(0)" class="sidebar-toggle" v-on:click="storeRevenue(4)">总收入</a> </li> </ul> <div class="input-group input-group-sm" style="padding: 7px;width: 150px;"> <div class="input-group-addon"> <i class="fa fa-calendar"></i> </div> <input placeholder="选择时间" style=" width: 204px;" type="text" class="layui-input" id="shopTime" /> </div> </div> </div> <ul class="dataAll" style="width: 100%;padding: 25px 50px 25px 50px;display: flex;justify-content: space-around;align-items: center;"> <li class="item"> <label>代金券销售金额 </label> <div>{{allPriceShop}}</div> </li> <li class="item"> <label>核销后支付金额</label> <div>{{allRealPriceShop}}</div> </li> <li class="item"> <label>店铺分成</label> <div>{{allRestaurantCommissionShop}}</div> </li> <li class="item"> <label>搜城分成</label> <div>{{allOfficialCommissionShop}}</div> </li> </ul> </div> <!--核销记录--> <div class="box box-body table-responsive"> <div class="box-header" style="padding-left: 0;"> <h3 class="box-title" style="line-height: 43px;">核销记录</h3> <div class="box-tools" style=" left: 128px;"> <ul class="nav navbar-nav"> <li class="dropdown messages-menu"> <a href="javascript:void(0)" class="sidebar-toggle" v-on:click="writeOffRecord(1,1,1)">昨天</a> </li> <li class="dropdown messages-menu"> <a href="javascript:void(0)" class="sidebar-toggle" v-on:click="writeOffRecord(1,1,2)">今天</a> </li> </ul> <div style="display: inline-block"> <form class="form-inline" style="display: flex;justify-content: space-around;align-items: center;padding: 0px 50px;line-height: 43px;"> <div class="form-group"> <label style="text-align: center;">交易时间</label> <input autocomplete="off" placeholder="选择时间" id="HX_date" type="text" name="table_search" class="form-control"/> </div> <div class="form-group"> <label style="text-align: center;">核销编号</label> <input autocomplete="off" type="text" placeholder="输入订单编号" class="form-control" v-model="codeHX"/> </div> <div class="form-group"> <label style="text-align: center;">手机号</label> <input autocomplete="off" type="text" placeholder="输入手机号" class="form-control" v-model="mobileHX"/> </div> <div class="form-group"> <button type="button" class="btn btn-block btn-primary" v-on:click="writeOffRecord(1,1,writeOffRecordNum)">查询 </button> </div> </form> </div> </div> </div> <div class="box-body table-responsive no-padding"> <table class="table table-hover"> <thead> <tr> <th v-for="item in writeOffRecordTitle" style="text-align: center;">{{item.typeName}}</th> </tr> </thead> <tbody> <tr> <td colspan="11" class="noFound2 disNone"><div>当前暂无记录，您可查看其他的核销记录</div></td> </tr> <tr v-for="(item,index) in writeOffRecordData"> <td style="text-align: center;">{{index+1}}</td> <td style="text-align: center;">{{item.gmtCreate}}</td> <td style="text-align: center;">{{item.code}}</td> <td style="text-align: center;">{{item.wxNickName}}</td> <td style="text-align: center;">{{item.mobile}}</td> <td style="text-align: center;">{{item.vouchersName}}</td> <td style="text-align: center;">{{item.amount/100}}</td> <td style="text-align: center;">{{item.deductionPrice/100}}</td> <td style="text-align: center;">{{item.price/100}}</td> <td style="text-align: center;">{{item.usedVouchersNum}}</td> <td style="text-align: center;">{{item.realPrice/100}}</td> </tr> </tbody> </table> </div> </div> <div id="writeOffRecord" class="main-footer" style="margin-left: 0;display: flex;justify-content: flex-end;align-items: center; border-top: 0px solid #d2d6de;"> <!--<div v-show="allpage.length >1" style="float: right;margin-right: 10px;" class="pagination">--> <!--当前第{{current}}页,共{{allpage}}页--> <!--</div>--> <ul style="float: right;margin:20px 0" class="pagination"> <li v-on:click="(currentRecord != 1)? writeOffRecord(1,4,writeOffRecordNum):‘‘"><a href="javascript:void(0);">首页</a> </li> <li v-on:click="(currentRecord != 1)? writeOffRecord(currentRecord--,-1,writeOffRecordNum):‘‘"><a href="javascript:void(0);">上一页</a> </li> <li v-for="index in pageRecord" v-on:click="writeOffRecord(index,0,writeOffRecordNum)" v-bind:class="{‘active‘:currentRecord == index}" v-bind:key="index"> <a href="javascript:void(0);">{{index}}</a> </li> <li v-on:click="(allpageRecord != currentRecord) ? writeOffRecord(currentRecord++,2,writeOffRecordNum):‘‘"><a href="javascript:void(0);">下一页</a> </li> <li v-on:click="(allpageRecord != currentRecord)?writeOffRecord(allpageRecord,5,writeOffRecordNum):‘‘"><a href="javascript:void(0);">末页</a></li> </ul> </div> </div> <!--</div>--> <!-- jQuery 3 --> <script src="/js/jquery.min.js"></script> <!-- Bootstrap 3.3.7 --> <script src="/js/bootstrap.min.js"></script> <script th:inline="javascript"> new Vue({ el: "#membersShipCard", data: { current: 1, showItem: 5, allpage: 1, currentRecord: 1, showItemRecord: 5, allpageRecord: 1, xm: 0, saleTitle:[ {typeName: ‘序号‘}, {typeName: ‘交易时间‘}, {typeName: ‘代金券编号‘}, {typeName: ‘昵称‘}, {typeName: ‘手机号‘}, {typeName: ‘代金券名称‘}, {typeName: ‘代金券价格‘}, {typeName: ‘购买张数‘}, {typeName: ‘官方（搜城天下）抽成（元）‘}, {typeName: ‘店铺抽成（元）‘}, ], writeOffRecordTitle:[ {typeName: ‘序号‘}, {typeName: ‘交易时间‘}, {typeName: ‘核销编号‘}, {typeName: ‘昵称‘}, {typeName: ‘手机号‘}, {typeName: ‘代金券名称‘}, {typeName: ‘消费总金额（元）‘}, {typeName: ‘代金券抵扣金额（元）‘}, {typeName: ‘代金券售卖金额（元）‘}, {typeName: ‘使用张数‘}, {typeName: ‘优惠后支付‘}, ], purchaseHistoryData: [], code: ‘‘, //查询 mobile: ‘‘, //手机号 beginDate: ‘‘, endDate: ‘‘, allOfficialCommission: ‘‘, allPrice: ‘‘, allRealPrice: ‘‘, allRestaurantCommission: ‘‘, // timeType:1,//日期 pageStart:0, pageSize:0, restaurantId:0, soldAllNum:0, cancelAllAmount:0, soldAllAmount:0, cancelAllNum:0, noCancelAllNum:0, timeNum:0, //核销 mobileHX:‘‘, codeHX:‘‘, writeOffRecordData: [], writeOffRecordNum:"", indexNum:1 }, filters: {}, // 数据初始化 mounted: function () { this.getPurchaseHistoryData(1, 1, 0); this.storeRevenue(2); this.writeOffRecord(1,1,0) var this_ = this; layui.use(‘laydate‘, function () { var laydate = layui.laydate; laydate.render({ elem: ‘#jt_date‘,//指定元素; type: ‘date‘, theme: ‘3c8dbc‘, range: ‘~‘, max: new Date().valueOf(), done: function (value, date, endDate) { value = value.split(‘~‘); this_.beginDate = value[0]; this_.endDate = value[1]; if(value==""){ this_.getPurchaseHistoryData(1, 1,2) }else{ this_.getPurchaseHistoryData(1, 1,3) } } }); //核销 laydate.render({ elem: ‘#HX_date‘,//指定元素; type: ‘date‘, theme: ‘3c8dbc‘, range: ‘~‘, max: new Date().valueOf(), done: function (value, date, endDate) { value = value.split(‘~‘); this_.beginDate = value[0]; this_.endDate = value[1]; if(value==""){ this_.writeOffRecord(1, 1,2) }else{ this_.writeOffRecord(1, 1,3) } } }); }); }, computed: { pages: function () { var pag = []; var current = this.current; var showItem = this.showItem; if (current >= showItem) { //如果当前的激活的项 小于要显示的条数 //总页数和要显示的条数那个大就显示多少条 var middle = this.current - Math.floor(this.showItem / 2),//从哪里开始 i = this.showItem; if (middle > (this.allpage - this.showItem)) { middle = (this.allpage - this.showItem) + 1 } while (i--) { pag.push(middle++); } } else { //当前页数大于显示页数了 var i = Math.min(this.showItem, this.allpage); //显示数据中低的那个 while (i) { pag.unshift(i--); } } console.log("销售记录"+current,showItem) return pag }, pageRecord: function () { var pag = []; var currentRecord = this.currentRecord; var showItemRecord = this.showItemRecord; if (currentRecord >= showItemRecord) { //如果当前的激活的项 小于要显示的条数 //总页数和要显示的条数那个大就显示多少条 var middle = this.currentRecord - Math.floor(this.showItemRecord / 2),//从哪里开始 a = this.showItemRecord; console.log("大于"+middle) if (middle > (this.allpageRecord - this.showItemRecord)) { middle = (this.allpageRecord - this.showItemRecord) + 1 } while (a--) { pag.push(middle++); } } else { //当前页数大于显示页数了 var a = Math.min(this.showItemRecord, this.allpageRecord); console.log("当前页大于显示页数"+a) while (a) { pag.unshift(a--); } } console.log(pag) console.log("最后页码"+currentRecord,showItemRecord) return pag } }, methods: { getPurchaseHistoryData: function (index, num,timeType ) { if(this.code!=""||this.mobile!=""){ timeType = 4; index =1; } console.log("show"+index, num,timeType) if(timeType==null){ timeType:this.timeType } if (index==null){ index:this.index } var this_ = this; if (timeType!=null){ this_.timeNum=timeType } if (num == 2) { index = index + 1; } else if (num == -1) { index = index - 1; } else if (num == 1) { index = index this.current = index; } else if (num == 0) { if (index == this_.current) return; this.current = index; } else if (num == 4) { this_.current = 1; index = index; } else if (num == 5) { this_.current = this_.allpage; index = index; } var dataStr = { }; if (timeType==3){ dataStr.beginDate = this.beginDate; dataStr.endDate = this.endDate; dataStr.timeType = timeType; }else{ dataStr.beginDate = ""; dataStr.endDate = ""; dataStr.timeType = timeType; } dataStr = JSON.stringify({ pageNumber: index, code: this.code, mobile: this.mobile, beginDate: this.beginDate, endDate: this.endDate, timeType:timeType, pageStart:0, pageSize:0, restaurantId:this.restaurantId, }); console.log(dataStr) // 销售记录 $.ajax({ type: ‘post‘, contentType: ‘application/json‘, url: ‘/v1/business/searchcity/voucherCancle/voucherBuyRecord‘, data: dataStr, success: function (res) { console.log(res); if(res.status ==-1999){ $(".noFound").removeClass("disNone") }else{ $(".noFound").addClass("disNone") } this_.purchaseHistoryData = res.data.result; this_.allpage = res.data.pageCount; this_.allOfficialCommission = res.data.allOfficialCommission; this_.allPrice = res.data.allPrice; this_.allRealPrice = res.data.allRealPrice; this_.allRestaurantCommission = res.data.allRestaurantCommission; // yz this_.soldAllNum = res.data.soldAllNum; this_.soldAllAmount = res.data.soldAllAmount; this_.cancelAllNum = res.data.cancelAllNum; this_.cancelAllAmount = res.data.cancelAllAmount; this_.noCancelAllNum = res.data.noCancelAllNum; }, error: function (res) { alert("获取失败") } }); }, //核销记录 // writeOffRecord:function(index,num,timeSelection){ if(this.codeHX!=""||this.mobileHX!=""){ timeSelection = 4; index=index; } console.log("efgh"+index,num,timeSelection) var this_ = this; if (timeSelection!=null){ this_.writeOffRecordNum=timeSelection } if(timeSelection==null){ timeSelection:this.timeSelection } // if (index==null){ // index:this.index // } if (num == 2) { index = index + 1 } else if (num == -1) { index = index - 1 } else if (num == 1) { this_.currentRecord = 1; // index= index 注释了 } else if (num == 0) { if (index == this_.currentRecord) return; this.currentRecord = index; } else if (num == 4) { this_.currentRecord = 1; index = index; } else if (num == 5) { this_.currentRecord = this_.allpageRecord; index = index; } var dataSucc = { }; if (timeSelection==3){ dataSucc.beginDate = this.beginDate; dataSucc.endDate = this.endDate; dataSucc.timeType = timeSelection; }else{ dataSucc.beginDate = ""; dataSucc.endDate = ""; dataSucc.timeType = timeSelection; } dataSucc = JSON.stringify({ pageNumber: index, code: this.codeHX, mobile: this.mobileHX, beginDate: this.beginDate, endDate: this.endDate, timeType:timeSelection, pageStart:0, pageSize:0, restaurantId:this.restaurantId, }); console.log(dataSucc) $.ajax({ type: ‘post‘, contentType: ‘application/json‘, url: ‘/v1/business/searchcity/voucherCancle/voucherCancleRecord‘, data: dataSucc, success: function (res) { console.log(res); if (res.status ==-1999){ $(".noFound2").removeClass("disNone") }else{ $(".noFound2").addClass("disNone") } this_.writeOffRecordData=res.data.result; this_.allpageRecord = res.data.pageCount; }, error: function (res) { alert("获取失败") } }); }, }, }) </script> </body> </html>
以上是关于新人 记录VUE中分页实现的主要内容，如果未能解决你的问题，请参考以下文章