我要评论
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);
}
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论