vue.js 表格分頁ajax 非同步載入資料，vue.jsajax

vue.js 表格分頁ajax 非同步載入資料，vue.jsajax

Vue.js是一個輕巧、高效能、可組件化的MVVM庫，同時擁有非常容易上手的API。

分頁一般和表格一起用，分頁連結作為表格的一部分，將分頁連結封裝成一個獨立的組件，然後作為子組件嵌入到表格組件中，這樣比較合理。

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 = this.cur - mid;var right = Math.max(this.cur + this.pageNum - mid -1,this.pageNum);if (left < 1) {left = 1}if (right > this.all ) { right = this.all}while (left <= right){list.push(left)left ++}return list;},showLast: function(){if(this.cur == this.all){return false}return true},showFirst: function(){if(this.cur == 1){return false}return true}}});

模板：

<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='parentEle'>...<pagination :cur="1" :all="pageAll" :page-num="10" @page-to="loadList"></pagination></div>

當點擊分頁連結的時候，會觸發

page-to

事件，而我們在html標籤中指定了使用父組件

loadList

方法處理事件，我們只要在組件中把當前頁碼傳給父組件即可，父組件負責ajax載入資料，並更新自身的 pageAll 值。