?添加一個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，此處可根據自己所需進行數據類型的獲取，查看類型以及所屬屬性可以根據后臺接口中查取的數據進行判斷。

轉載于:https://www.cnblogs.com/qing0228/p/11324295.html

總結

以上是生活随笔為你收集整理的page分页问题，根据页码获取对应页面的数据，接口调用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。