Vue学习小案例--分页组件封装
生活随笔
收集整理的這篇文章主要介紹了
Vue学习小案例--分页组件封装
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- Vue學習小案例--分頁組件封裝
- 修改成Vue（使用組件）
Vue學習小案例–分頁組件封裝
index.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>VUE分頁功能</title><link rel="stylesheet" type="text/css" href="bootstrap.css"/><script type="text/javascript" src='js/vue.js'></script><script type="text/javascript" src='js/axios.js'></script><script type="text/javascript" src='js/index.js'></script> </head> <body><div id="my" > <div class="panel panel-primary" style="margin:20px;"><!-- 頭部 --><div class="panel-heading"><h1 style="display: inline-block;">商品信息統計表</h1><span>客戶總數<span class="label label-warning" >{{page.rows}}</span></span></div><!-- 內容 --><div class="panel-body"><table class="table table-condensed"><thead><tr><th>序號</th><th>商品名稱</th><th>商品價格</th><th>商品詳情</th></tr></thead><tbody><tr v-for="(list,i) in lists" :key="list.product_id"><td>{{num(i)}}</td><td>{{list.product_name}}</td><td>{{list.product_price}}</td><td><button type="button" class="btn btn-success btn-sm">查看詳情</button></td></tr></tbody></table></div><!--分頁--><nav aria-label="Page navigation" style="text-align: center;"><ul class="pagination"><li :class="page.pageNo<=1?'disabled':''" @click="pagePre()" ><a aria-label="Previous"><span aria-hidden="true">«</span></a></li><li v-for="index in pages" :key="index":class="page.pageNo == index?'active':''"@click="curPage(index)"><a>{{index}}</a></li><li :class="page.pageNo>=page.pageTotal?'disabled':''" @click="pageNext()"><a aria-label="Next"><span aria-hidden="true">»</span></a></li></ul></nav></div></div> </body> <style> </style> </html>index.js
window.onload = function(){new Vue({el:'#my',data:{lists:[],page:{pageTotal:1, //總頁數rows:1, //總條數pageNo:1,//頁碼pageSize:10 //每一頁多少條}},methods:{getLists:function(i){this.page.pageNo = i ||this.page.pageNo;axios({method:'get',url:`http://localhost:7002/home/page/${this.page.pageNo}/${this.page.pageSize}`}).then(res=>{console.log(res)this.lists = res.data.data;this.page.pageTotal = res.data.pageTotal; //總頁數this.page.rows = res.data.rows; //總條數}).catch(function(error){})},curPage:function(index){ //當前頁if(index=='...') return;this.getLists(index);},pagePre:function(){ //上一頁if(this.page.pageNo >1){this.page.pageNo--;this.getLists(this.page.pageNo);}},pageNext:function(){ //下一頁if(this.page.pageNo <this.page.pageTotal){this.page.pageNo++;this.getLists(this.page.pageNo);}},},computed:{ //計算屬性num:function(){return function(i){return (this.page.pageNo-1)*this.page.pageSize+i+1}},pages:function(){var start = this.page.pageNo;var end = this.page.pageTotal;if(end <10) return end;if(start <=5){return [1,2,3,4,5,6,7,'...',end]}else if(start >=end -5){return [1,'...',end-6,end-5,end-4,end-3,end-2,end-1,end]}else {return [1,'...',start-3,start-2,start-1,start,start+1,start+2,'...',end]}}},mounted:function(){this.getLists();}}) }//總頁數10 不需要... //總頁數>10 需要... //當前頁碼在小于5 [1,2,3,4,5,6,7,...,21] //當前頁碼大于 16 [1,...,15,16,17,18,19,20,21] //[1,...,3,4,5,6,7,8,...,21]修改成Vue（使用組件）
<template> <div style="float:left;width:80%"><div class="panel panel-primary" ><!-- 頭部 --><div class="panel-heading"><h1 style="display: inline-block;">商品信息統計表</h1><span>客戶總數<span class="label label-warning" >{{page.rows}}</span></span></div><!-- 內容 --><div class="panel-body"><table class="table table-condensed"><thead><tr><th>序號</th><th>商品名稱</th><th>商品價格</th><th>商品詳情</th></tr></thead><tbody><tr v-for="(v,i) in lists" :key="v.product_id"><td>{{num(i)}}</td><td>{{v.product_name}}</td><td>{{v.product_uprice}}</td><td><button type="button" class="btn btn-success btn-sm">查看詳情</button></td></tr></tbody></table></div><!--分頁--> <nav aria-label="Page navigation" style="text-align: center;"><ul class="pagination"><li @click="pagePre()"><a aria-label="Previous"><span aria-hidden="true">«</span></a></li><li v-for="(v,i) in pages" :key="i"@click="pageCur(v)":class="page.pageNo == v?'active':''" ><a>{{v}}</a></li><li @click="pageNext()"><a aria-label="Next"><span aria-hidden="true">»</span></a></li></ul></nav></div> </div> </template><script>export default {data(){return{lists:[],page:{pageTotal:1,//總頁數rows:1, //總條數pageNo:1, //頁碼pageSize:10//每一頁條數}}},methods:{getData(i){this.page.pageNo = i ||this.page.pageNo;this.$http.get(`http://localhost:7002/home/page/${this.page.pageNo}/${this.page.pageSize}`).then(res=>{console.log(res);var {data,pageTotal,rows} = res.data;this.lists = data;this.page.pageTotal = pageTotal;this.page.rows =rows;}).catch(error=>{})},//當前頁pageCur(v){if(v=='...') return;this.getData(v);},//上一頁pagePre(){var {pageNo} = this.page;if(pageNo>1){this.getData(--this.page.pageNo);}},//下一頁pageNext(){if(this.page.pageNo<this.page.pageTotal){this.getData(++this.page.pageNo);}}},computed:{//1、總頁數小于10個，不添加...// 2、總頁數大于10個，添加...// ...添加在后面 1，2，3，4，5，... 21// ...添加在前面 1... 17 18 19 20 21// ...添加在二邊 1... 10 11 12 13 14 15...21pages(){var {pageNo,pageTotal} = this.page;if(pageTotal<10) return pageTotal;if(pageNo<=5){return [1,2,3,4,5,6,7,'...', pageTotal]}else if(pageNo >=pageTotal-5){return [1,'...',pageTotal-6, pageTotal-5,pageTotal-4,pageTotal-3,pageTotal-2,pageTotal-1,pageTotal]}else {return [1,'...',pageNo-3, pageNo-2,pageNo-1,pageNo,pageNo+1,pageNo+2,pageNo+3,'...',pageTotal]}},num(){return function(i){var {pageNo,pageSize} = this.page;return (pageNo-1)*pageSize+i+1;} }},mounted(){this.getData();} } </script>將分頁提取出來，單獨成組件：
<template> <div style="float:left;width:80%"><div class="panel panel-primary" ><!-- 頭部 --><div class="panel-heading"><h1 style="display: inline-block;">商品信息統計表</h1><span>客戶總數<span class="label label-warning" >{{page.rows}}</span></span></div><!-- 內容 --><div class="panel-body"><table class="table table-condensed"><thead><tr><th>序號</th><th>商品名稱</th><th>商品價格</th><th>商品詳情</th></tr></thead><tbody><tr v-for="(v,i) in lists" :key="v.product_id"><td>{{num(i)}}</td><td>{{v.product_name}}</td><td>{{v.product_uprice}}</td><td><button type="button" class="btn btn-success btn-sm">查看詳情</button></td></tr></tbody></table></div><!--分頁--> <!-- 第一種方式，子發射事件來調用父的方法 --><!-- <pagination :pageTotal="page.pageTotal" :pageNo="page.pageNo" @e-child="getData"/> --><!-- 第二種方式，sync修飾符 操作父組件的值 --><pagination :pageTotal="page.pageTotal" :pageNo.sync="page.pageNo"/></div> </div> </template><script> import pagination from './pagination';export default {data(){return{lists:[],page:{pageTotal:1,//總頁數rows:1, //總條數pageNo:1, //頁碼pageSize:10//每一頁條數}}},components:{pagination},//監聽pageNo的變化，調用getData() 因為第二種方式，sync修飾符 操作父組件的值不會去觸發getData()watch:{'page.pageNo'(newValue,oldValue){this.getData(newValue);}},methods:{getData(i){this.page.pageNo = i ||this.page.pageNo;this.$http.get(`http://localhost:7002/home/page/${this.page.pageNo}/${this.page.pageSize}`).then(res=>{console.log(res);var {data,pageTotal,rows} = res.data;this.lists = data;this.page.pageTotal = pageTotal;this.page.rows =rows;}).catch(error=>{})}, },computed:{num(){return function(i){var {pageNo,pageSize} = this.page;return (pageNo-1)*pageSize+i+1;} }},mounted(){this.getData();} } </script> <template> <nav aria-label="Page navigation" style="text-align: center;"><ul class="pagination"><li @click="pagePre()"><a aria-label="Previous"><span aria-hidden="true">«</span></a></li><li v-for="(v,i) in pages" :key="i"@click="pageCur(v)":class="pageNo == v?'active':''" ><a>{{v}}</a></li><li @click="pageNext()"><a aria-label="Next"><span aria-hidden="true">»</span></a></li></ul> </nav> </template><script> export default {data(){return{curNo:1}},props:['pageTotal','pageNo'],created(){this.curNo = this.pageNo;},methods:{//當前頁pageCur(v){if(v=='...') return;this.curNo = v;//this.$emit('e-child',v);this.$emit('update:pageNo',v)},//上一頁pagePre(){if(this.pageNo>1){//this.$emit('e-child',--this.curNo);this.$emit('update:pageNo',--this.curNo)}},//下一頁pageNext(){if(this.pageNo<this.pageTotal){//this.$emit('e-child',++this.curNo);this.$emit('update:pageNo',++this.curNo)}}},computed:{//1、總頁數小于10個，不添加...// 2、總頁數大于10個，添加...// ...添加在后面 1，2，3，4，5，... 21// ...添加在前面 1... 17 18 19 20 21// ...添加在二邊 1... 10 11 12 13 14 15...21pages(){var pageNo= this.pageNo;var pageTotal = this.pageTotal;if(pageTotal<10) return pageTotal;if(pageNo<=5){return [1,2,3,4,5,6,7,'...', pageTotal]}else if(pageNo >=pageTotal-5){return [1,'...',pageTotal-6, pageTotal-5,pageTotal-4,pageTotal-3,pageTotal-2,pageTotal-1,pageTotal]}else {return [1,'...',pageNo-3, pageNo-2,pageNo-1,pageNo,pageNo+1,pageNo+2,pageNo+3,'...',pageTotal]}}}, } </script> 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的Vue学习小案例--分页组件封装的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue学习（slot、axios）-学习
- 下一篇： Vue学习（watch、computed