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

const MODULE_URL = '/log';

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

 

Page Paging Problem.

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

 

Tot= "paging. total" denotes how many pieces of data exist in the total.

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

Curr= "paging. pageNo" denotes the current page number.

@ on-change="pageChange" means that the pagechange function is triggered when the corresponding page number is clicked.

1. Import interface.

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

 

2. Declare global variables in export default {} and set the initial value of page data.

  export default {
    data() {
      return {
getdata : [],//Declare global variables
        // List page number
         paging: {
           pageNum: 1,
           pageSize: 13,
           total: 0,       
},

 

3. Make interface calls in methods:{} and write them into the function initList, where params specifies the parameters that need to be input when calling the interface. By calling the actionLogData interface to get the required values, we can first use console.log(res) to determine which attribute values in the acquired data.

When the page number is clicked for data switching, the page of the corresponding page is obtained, and the function pageChange(page) is called to obtain the data in the corresponding page.

   methods: {
      initList() {
        const params = {
          pageSize: this.paging.pageSize,
          pageNo: this.paging.pageNum,
        };

        actionLogData(params,res=>{
          if (!res.status) {
            console.log('Request encountered an error!');
            return;
          }
          const { data } = res;
          this.getdata = data.list; //get data
          this.paging.total = data.total; //Quantity of total data obtained
        }, err => {
          this.$Message.error('Request encountered an error!Please try again later.');
        });
      },

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

 

4. At the same time, a back-end request is made in mounted() to fetch data.

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