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‘;
2、在export default{}中声明全局变量,并设定页面数据的初始值。
export default { data() { return { getdata : [],//声明全局变量 // 列表页码 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; this.initList(); } },
4、于此同时,在mounted()中发起后端请求,拿取数据;
mounted() { this.initList(); this.pageChange(page); }
原文地址:https://www.cnblogs.com/qing0228/p/11324295.html
时间: 2024-10-06 01:27:30