分享一下vue ui的分页的用法

Posted 2020-09-02

    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
            }
        })
    }()