分页

<div class="pagination">
        <el-pagination
            @size-change="changeNum"
            @current-change="changePage"
            :current-page="where.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="where.pageSize"
            layout="total, prev, pager, next,sizes"
            :total="total">
        </el-pagination>
    </div>
export default {
  name: 'whiteList',
  components:{hotelDetail},
  data () {
        return {
          
            total:0,  // 数据条数   table   表格  接口  返回
            where: {
                    roleName:null,
                    statusEnum:null, 
                    startTime:null,
                    endTime:null,          
                    pageNum: 1,
                    pageSize: 10,  
                    orderByColumn:'create_time',
                    isAsc:'desc'                                                                                                
                },  





 changeNum(val) {  
         
        this.where.pageSize = val;
       
        this.getlist(); //table  列表数据获取方法
    },
    changePage(val) { 
        this.where.pageNum=val;       
        this.getlist();
    },           

getlist(status){ 
         if(status=='default'){
            this.where.pageNum=1;         
            this.tableData=[];
            this.total=0;         
        }   
        var _that=this;       
        this.$axios({
            method: "get",
            url: '/system/role/page',
            params: this.where,
            headers: {
                "Content-Type": "application/json;charset=UTF-8"
            }
        }).then(res => {                   
            if (res.data.code == 0) {                  
                if(res.data.data.rows!=null){
                    this.tableData=res.data.data.rows;                  
                    this.total = res.data.data.total;                  
                }                             
            } else { 
              _that.$notify.error({
                title: '提醒',
                message: res.data.msg
              });
            }            

        }).catch(function(error) {            
          _that.$notify.error({
                title: '错误',
                message: error.data.msg
            });
        }); 
    },