var newToAddLeave = function(){var goIndex = {template:`<i-table :columns="overTimeList.columns" :data="overTimeList.data" no-data-text="暫無數據"></i-table><div class="vue-system-page"><Page :current="1" :show-total="true" :total="overTimeList.total" :page-size="5" :page-size-opts="[10, 20, 30, 40]" :show-elevator="true" @on-change="handlePage"></div></Page>`,data:function(){return {overTimeList:{columns:[],data:[],total:0,page:1,checkedNames: []}}},methods:{textData:function(){var list = [];var _this = this;_this.$Loading.start();_this.$Message.loading("");for(var i=0; i<18; i++){list.push(Mock.mock({"Serial":'@increment',"Applicant":"@cname","ApplicantType": 'trms',"StartTime":'@date("yyyy-MM-dd")',"endTime|":'@date("yyyy-MM-dd")',"days|1-10":10,"processName|1": ['tmrs','新聞','員工有話說','portal'],"action": '001',"Manage": '@clast',"processTime|1": ['2017-1-30'],"sydays|1": [2,3],"beizhu": '@ctitle(3, 5)',}));}_this.overTimeList.data = list;_this.overTimeList.total = list.length;setTimeout(function(){_this.$Loading.finish();_this.$Message.destroy();},2000)},handlePage:function(val){this.page = val;this.textData();},getOverTimeList:function(){var self = this;self.overTimeList.columns = [ {title: '序號',key: 'Serial',align:'center'},{title: '申請人',key: 'Applicant',align:'center'},{title: '申請類型',key: 'ApplicantType',align:'center'},{title: '開始日期',key: 'StartTime',align:'center'},{title: '結束日期',key: 'endTime',align:'center'},{title: '天數',key: 'days',align:'center'},{title: '項目名稱',key: 'processName',align:'center'},{title: '操作',key: 'action',align:'center'},{title: '經辦人',key: 'Manage',align:'center'}, {title: '處理時間',key: 'processTime',align:'center'},{title: '剩余天數',key: 'sydays',align:'center'},{title: '備注',key: 'beizhu',width:200,}];}},ready:function(){this.getOverTimeList();this.textData();}}return new Vue({el:'#app2',components:{goIndex:goIndex}})}()

?

轉載于:https://www.cnblogs.com/zhujiasheng/p/6493004.html

總結

以上是生活随笔為你收集整理的分享一下vue ui的分页的用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。