首页 > 代码库 > 分享一下vue ui的分页的用法
分享一下vue ui的分页的用法
var newToAddLeave = function(){ var goIndex = { template:` <i-table :columns="overTimeList.columns" :data="http://www.mamicode.com/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 } }) }()
分享一下vue ui的分页的用法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。