page分頁問題，根據頁碼獲取對應頁面的數據，接口調用

 添加一個log.js文件，進行接口調用。

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分頁問題。

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

 

  :total="paging.total"  表示總共中存在多少條數據；

  :pageSize="paging.pageSize"  表示一個頁面上需要顯示多少條數據；

  :current="paging.pageNo" 表示當前頁碼；

  @on-change="pageChange" 表示點擊對應頁碼時觸發pagechange函數。

1、導入接口。

import { actionLogData } from '@/api/log'; //{}中是導入接口的名稱，from后顯示的是開始時所寫log.js文件的位置

 

2、在export default{}中聲明全局變量，並設定頁面數據的初始值。

  export default {
    data() {
      return {
　　　　　getdata : [],//聲明全局變量
        　// 列表頁碼（其中包括當前頁碼：pageNum；頁面中顯示的數據條數：pageSize,以及數據庫中存在當前數據的總條數：total）
         paging: {
           pageNum: 1,
           pageSize: 13,
           total: 0,       
},

 

3、在methods:{}中進行接口調用，寫入函數initList中，其中params中寫明調用接口時需要輸入的參數。通過調用actionLogData接口，獲取需要的值，可以先通過console.log(res)來判斷獲取數據中的哪些屬性值。

在點擊頁碼進行數據切換時，獲取對應的頁面的page，並調用函數pageChange(page)來獲取到對應頁面中的數據。

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

        actionLogData(params,res=>{
          if (!res.status) {
            console.log('請求遇到錯誤!');
            return;
          }
          const { data } = res;
          this.getdata = data.list; //獲取數據
          this.paging.total = data.total; //獲取全部數據的數量
        }, err => {
          this.$Message.error('請求遇到錯誤!請稍后再試');
        });
      },

      /*頁碼切換*/
      pageChange(page) {
        this.paging.pageNum = page;//根據點擊時間獲取當前頁面值page，進行數據回傳。
        this.initList();
      }
    },

 

4、於此同時，在mounted()中發起后端請求，拿取數據；

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

 

5、最后將獲取到的數據進行展示，獲取到的數據為第3步中的getData，此處可根據自己所需進行數據類型的獲取，查看類型以及所屬屬性可以根據后台接口中查取的數據進行判斷。