使用分頁組件前先明確幾個(gè)問題
1、分頁組件只是一個(gè)組件，肯定不是直接加進(jìn)去就能用。
2、分頁分為前端分頁和后端分頁，一般都是用后端分頁，也就是一次查詢一頁數(shù)據(jù)
3、分頁組件根據(jù)總記錄條數(shù)和每頁記錄條數(shù)自動(dòng)分頁
清楚這幾個(gè)問題，問題就迎刃而解了

看代碼，這里使用的是element-plus的分頁

<template>
    <div class="container">
        <el-table :data="tableData" border>
            <el-table-column prop="c_id" label="ID" width="90" />
            <el-table-column prop="c_name" label="名稱" width="85" />
            <el-table-column prop="c_num" label="剩余數(shù)量" width="110" />
            <el-table-column prop="c_price" label="價(jià)格" width="80" />
            <el-table-column prop="c_total" label="數(shù)量" width="90" />
            <el-table-column prop="c_type" label="類型" width="90" />
            <el-table-column prop="shop_id" label="店鋪ID" width="90" />
            <el-table-column prop="c_icon" label="商品圖片" width="100" />
        </el-table>

        <!-- page-sizes 每頁顯示個(gè)數(shù)選擇器的選項(xiàng)設(shè)置 -->
        <!-- page-size  每頁顯示條目個(gè)數(shù)，支持 .sync 修飾符 -->
        <!-- currentPage 剛進(jìn)入時(shí)是第幾頁（刷新后是第幾頁）-->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-sizes="pagesizes" :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper" v-model:total="total">
        </el-pagination>
    </div>
</template>


<script>
export default {
    data() {
        return {
            tableData: [
                
            ],
            currentPage: 1,//現(xiàn)在是第幾頁 
            pagesizes: [5, 10, 15],
            pagesize: 5,//現(xiàn)在一頁有幾條
            total: 28,//分頁組件根據(jù)一共有多少條自動(dòng)分頁，所以這個(gè)總條數(shù)可以直接請求拿到       
        }

    },
    methods: {
        handleSizeChange(val = 5) {
            //pageSize 改變時(shí)會(huì)觸發(fā)
            //回調(diào)參數(shù) 每頁條數(shù)
            // this.num = val;
            this.pagesize = val;
            console.log(`每頁 ${val} 條`);

            //當(dāng)改變每頁條數(shù)的時(shí)候，回到第一頁重新開始
            this.currentPage=1;
    
            // this.page=1;
            this.request(val,1);            
        },
        handleCurrentChange(val = 1) {
            //currentPage 改變時(shí)會(huì)觸發(fā)  點(diǎn)擊上一頁和下一頁時(shí)觸發(fā)
            //回調(diào)參數(shù) 當(dāng)前頁
            this.currentPage = val;
            console.log(`當(dāng)前頁: ${val}`);
            this.request(this.pagesize,val);
        },
        request(num,page)//參數(shù)：在每頁多少條的情況下，需要第幾頁的數(shù)據(jù)
        {
            console.log(num,page)
            this.$axios({
                methods: "post",
                url: `http://localhost/allphpcode/elementpaginationdemo/response.php?num=${num}&page=${page}`,
            }).then((res) => {
                console.log(res)
                this.tableData = res.data.data;
            }).catch((error) => {
                console.log(error);
            })
        }
    },
    created() {
        // this.handleCurrentChange();
        // this.handleSizeChange();
        //主要根據(jù)當(dāng)前第幾頁，每頁多少條來向后端發(fā)起請求獲得相應(yīng)的數(shù)據(jù)
        this.request(5,1);
    },
}
</script>


<style lang="scss" scoped>
.container {
    padding: 0 200px;
}
</style>

首先是有一個(gè)表格，表格的數(shù)據(jù)來自tableData，表格下面就是分頁；
@size-change是pagesize改變時(shí)觸發(fā)的事件，參數(shù)的值就是每頁多少條；
@current-change是currentPage改變時(shí)會(huì)觸發(fā)的事件，也就是點(diǎn)擊上一頁或者下一頁時(shí)，參數(shù)的值就是當(dāng)前第幾頁；
再后面就是把三個(gè)屬性綁定給相應(yīng)的值，total是數(shù)據(jù)庫里這張表的總條數(shù)，分頁組件就是據(jù)此自動(dòng)分頁；
layout是組件布局，顯示總條數(shù)、每頁幾條的選擇器、上一頁、當(dāng)前頁、下一頁、跳轉(zhuǎn)到第幾頁

之后js部分有三個(gè)函數(shù)，
handleSizeChange是pageSize改變時(shí)會(huì)觸發(fā)、回調(diào)參數(shù)是每頁條數(shù)；
handleCurrentChange是currentPage改變時(shí)會(huì)觸發(fā)、點(diǎn)擊上一頁和下一頁時(shí)觸發(fā)、回調(diào)參數(shù)是當(dāng)前頁；
request是向后端請求表格數(shù)據(jù)，一次請求一頁的表格數(shù)據(jù)，把請求到的數(shù)據(jù)賦給tableData，函數(shù)的參數(shù)是在每頁多少條的情況下，需要第幾頁的數(shù)據(jù)；created時(shí)直接調(diào)用了request

后端代碼就是一個(gè)簡單的查詢，DB::getInstance()->connect()是一個(gè)pdo對象

<?php
require_once './DB.php';

// 跨域問題處理
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE");
header('Access-Control-Allow-Headers:x-requested-with,content-type');

$num = $_REQUEST['num'];
$page = $_REQUEST['page'];

$sql = "select * from commodity where c_id > $num*($page-1) and c_id <= $num*$page";
// echo $sql;

$stmt = DB::getInstance()->connect()->query($sql);
$commodity = $stmt->fetchAll();


$msg = array(
    "code" => "",
    "data" => $commodity,
    "message" => ""
);

if (empty($commodity)) {
    $msg['code'] = 404;
    $msg['message'] = "查找失敗";
} else {
    $msg['code'] = 1001;
    $msg['message'] = "查找成功";
}


exit(json_encode($msg));

image.png

所以整個(gè)流程就是：created時(shí)調(diào)用請求函數(shù)，獲取到第一頁數(shù)據(jù)（根據(jù)每頁多少條、當(dāng)前第幾頁）---->分頁組件根據(jù)相應(yīng)的參數(shù)（數(shù)據(jù)總條數(shù)、剛進(jìn)入是顯示到第幾頁、顯示哪些按鈕）加載----->點(diǎn)擊上一頁或下一頁按鈕時(shí)根據(jù)當(dāng)前第幾頁獲取數(shù)據(jù)---->改變每頁顯示條數(shù)時(shí)，回到第一頁，根據(jù)當(dāng)前第一頁、每頁顯示多少條請求數(shù)據(jù)。

還有就是直接點(diǎn)擊頁碼可以直接跳轉(zhuǎn)到相應(yīng)的頁，Go to也是可以的，這個(gè)內(nèi)部封裝好了。

就是這么簡單 ??