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，此处可根据自己所需进行数据类型的获取，查看类型以及所属属性可以根据后台接口中查取的数据进行判断。

转载于:https://www.cnblogs.com/qing0228/p/11324295.html

总结

以上是生活随笔为你收集整理的page分页问题，根据页码获取对应页面的数据，接口调用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。