page pagination problem, obtain the data corresponding to the page by the page number, interface calls

 

import axios from '@/libs/api.request'

const MODULE_URL = '/log';

export const actionLogData = (params, cb) => {
  axios.request({
    url: `${MODULE_URL}/actionLog`,//接口位置
    method: 'get',
    params
  }).then(cb);
};

 

Page pagination problem.

<Page class="table-page clearfix" :total="paging.total" :pageSize="paging.pageSize" :current="paging.pageNo" show-total show-elevator @on-change="pageChange"/>

 

  : total = "paging.total"   represents the total number of data exists;

  : pageSize = "paging.pageSize"  indicates how many pieces of data to be displayed on a page;

  : Current = "paging.pageNo"  indicates the current page number;

  @ ON-Change = "pageChange"  indicates triggering pagechange function when clicking the corresponding page number.

1, into the interface.

  import { actionLogData } from '@/api/log';

 

2, the export default {} declare a global variable, and sets the initial value of the page data.

  Export default { 
    Data () { 
      return { 
getData: [], // declare a global variable 
        // list page 
         Paging: { 
           pageNum: . 1 , 
           the pageSize: 13 is , 
           Total: 0 ,        
},

 

3, in the methods: the interface call for {}, initList write function in which the parameters to enter the interface in the call in params stated. ActionLogData by calling the interface, obtain the desired value, can first by console.log (res) which determines whether the acquired attribute value to the data.

When switching to click on data acquired page corresponding to the page, and calls the function pageChange (page) data corresponding to the acquired page.

   Methods: { 
      initList () { 
        const the params = { 
          the pageSize: the this .paging.pageSize, 
          pageNo is not: the this .paging.pageNum, 
        }; 

        actionLogData (the params, RES => {
           IF ! ( res.status) { 
            the console.log ( ' request encountered an error '! );
             return ; 
          } 
          const {data} = RES;
           the this .getdata = Data.List; // get the data 
          the this .paging.total = data.total; // Get the number of all data
        }, ERR => {
           the this . Message.Error An $ ( 'request encountered an error. Please try again! " ); 
        }); 
      } 

      / * Page switching * / 
      pageChange (Page) { 
        the this .paging.pageNum = Page ;
         the this .initList (); 
      } 
    },

 

4, the same time, the rear end request initiated Mounted (), the pick transactions;

    mounted() {
      this.initList();
      this.pageChange(page);
    }