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



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM