Javascript vue.js表格分頁,ajax異步加載數(shù)據(jù)
分頁一般和表格一起用,分頁鏈接作為表格的一部分,將分頁鏈接封裝成一個獨立的組件,然后作為子組件嵌入到表格組件中,這樣比較合理。
效果:
代碼:
1.注冊一個組件
js
Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //頁碼點擊事件 btnClick: function(index){ if(index != this.cur){ this.cur = index; } } }, watch:{ "cur" : function(val,oldVal) { this.$dispatch('page-to', val); } }, computed:{ indexes : function(){ var list = []; //計算左右頁碼 var mid = parseInt(this.pageNum / 2);//中間值 var left = Math.max(this.cur - mid,1); var right = Math.max(this.cur + this.pageNum - mid -1,this.pageNum); if (right > this.all ) { right = this.all} while (left <= right){ list.push(left); left ++; } return list; }, showLast: function(){ return this.cur != this.all; }, showFirst: function(){ return this.cur != 1; } } });
模板:
<script type="text/template" id="paginationTpl"> <nav v-if="all > 1"> <ul class="pagination"> <li v-if="showFirst"><a href="javascript:" @click="cur--">«</a></li> <li v-for="index in indexes" :class="{ 'active': cur == index}"> <a @click="btnClick(index)" href="javascript:">{{ index }}</a> </li> <li v-if="showLast"><a @click="cur++" href="javascript:">»</a></li> <li><a>共<i>{{all}}</i>頁</a></li> </ul> </nav> </script>
HTML:
<div id='item_list'> ... <pagination :cur="1" :all="pageAll" :page-num="10" @page-to="loadList"></pagination> </div>
當(dāng)點擊分頁鏈接的時候,通過watch cur,子組件分發(fā) page-to 事件,通過 @page-to="loadList" 標簽指定使用父組件 loadList 方法處理事件,父組件接收到page值然后ajax加載數(shù)據(jù),根據(jù)服務(wù)端返回計算并更新自身的 pageAll 值,因為子組件prop通過 :all="pageAll" 動態(tài)綁定了父組件的pageAll對象,所以子組件會聯(lián)動更新。
附上一個簡單的表格組件例子:
var vm = new Vue({ el: "#item_list", data: { items : [], //分頁參數(shù) pageAll:0, //總頁數(shù),根據(jù)服務(wù)端返回total值計算 perPage:10 //每頁數(shù)量 }, methods: { loadList:function(page){ var that = this; $.ajax({ url : "/getList", type:"post", data:{"page":page,"perPage":this.perPage}, dataType:"json", error:function(){alert('請求列表失敗')}, success:function(res){ if (res.status == 1) { that.items = res.data.list; that.perPage = res.data.perPage; that.pageAll = Math.ceil(res.data.total / that.perPage);//計算總頁數(shù) } } }); }, //初始化 init:function(){ this.loadList(1); } } }); vm.init();
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
- vue?組件異步加載方式(按需加載)
- 解決vue動態(tài)路由異步加載import組件,加載不到module的問題
- 詳解vue-router的Import異步加載模塊問題的解決方案
- vue+echarts實現(xiàn)動態(tài)繪制圖表及異步加載數(shù)據(jù)的方法
- vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題
- vue異步加載高德地圖的實現(xiàn)
- vue+webpack實現(xiàn)異步加載三種用法示例詳解
- 詳解Vue-Cli 異步加載數(shù)據(jù)的一些注意點
- Vue 處理異步加載順序問題之如何在Konva中確保文本在圖片之上顯示
相關(guān)文章
vue + echarts實現(xiàn)中國省份地圖點擊聯(lián)動
這篇文章主要介紹了vue + echarts實現(xiàn)中國地圖省份點擊聯(lián)動,需要的朋友可以參考下2022-04-04vue事件監(jiān)聽函數(shù)on中的this指針域使用
這篇文章主要介紹了vue事件監(jiān)聽函數(shù)on中的this指針域使用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08Vue-CLI3.x 自動部署項目至服務(wù)器的方法步驟
本教程講解的是 Vue-CLI 3.x 腳手架搭建的vue項目, 利用scp2自動化部署到靜態(tài)文件服務(wù)器 Nginx,感興趣的可以了解一下2021-11-11解決axios post 后端無法接收數(shù)據(jù)的問題
今天小編就為大家分享一篇解決axios post 后端無法接收數(shù)據(jù)的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10vue項目持久化存儲數(shù)據(jù)的實現(xiàn)代碼
這篇文章主要介紹了vue項目持久化存儲數(shù)據(jù)的實現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-10-10vue大屏自適應(yīng)的實現(xiàn)方法(cv就能用)
最近在用VUE寫大屏頁面,遇到屏幕自適應(yīng)問題,下面這篇文章主要給大家介紹了關(guān)于vue大屏自適應(yīng)的實現(xiàn)方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06Vue.js3.2響應(yīng)式部分的優(yōu)化升級詳解
這篇文章主要為大家介紹了Vue.js3.2響應(yīng)式部分的優(yōu)化升級詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07