码迷,mamicode.com
首页 > 其他好文 > 详细

page分页问题,根据页码获取对应页面的数据,接口调用

时间:2019-08-08 22:58:16      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:div   根据   imp   声明   axios   调用接口   取数   this   export   

 

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);
    }

 



page分页问题,根据页码获取对应页面的数据,接口调用

标签:div   根据   imp   声明   axios   调用接口   取数   this   export   

原文地址:https://www.cnblogs.com/qing0228/p/11324295.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!