ant design Vue 純前端實現(xiàn)分頁問題

更新時間：2023年04月21日 09:21:50 作者：想喝橙汁兒

這篇文章主要介紹了ant design Vue 純前端實現(xiàn)分頁問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

ant design Vue純前端實現(xiàn)分頁功能

(有選擇的話最好讓后端分頁，前端分頁可能會有問題，為了性能，盡量不要前端分頁)

自己想的一個簡單方法

通過頁碼改變事件，每頁數(shù)據(jù)個數(shù)改變事件，獲取改變后的頁碼，每頁條數(shù)，獲取數(shù)組中對應的數(shù)據(jù)。

代碼如下：

html：

<template>
? <div>
? ? <h3>學習文件</h3>
? ? <div class="videoMain" v-if="dataSourceList.length">
? ? ? <div class="videoBox" v-for="item in dataSourceList" :key="item.index">
? ? ? ? <a-tooltip placement="top">
? ? ? ? ? <template slot="title">
? ? ? ? ? ? {{item.name}}
? ? ? ? ? </template>
? ? ? ? ? <a class="ellipsis" :href="item.VUrl" rel="external nofollow" >{{item.name}}</a>
? ? ? ? </a-tooltip>
? ? ? </div>
? ? </div>
? ? <!-- 分頁 -->
? ? <div style="margin-top: 20px;" v-if="dataSourceList.length">
? ? ?<a-pagination size="small"?
? ? ? ? :total="ipagination.total"?
? ? ? ? v-model="ipagination.current"
? ? ? ? show-size-changer?
? ? ? ? show-quick-jumper?
? ? ? ? :page-size-options="ipagination.pageSizeOptions"
? ? ? ? :page-size="ipagination.pageSize"
? ? ? ? @change="pageChange"
? ? ? ? @showSizeChange="onShowSizeChange"
? ? ? ? :show-total="ipagination.showTotal" />
? ? </div>
? ? <div class="nullError" v-else>
? ? ? <p>暫無文件</p>
? ? </div>
? </div>
</template>

data：

data() {
? ? ? return {
? ? ? ? description: '文件列表組件',
? ? ? ? dataSource:[], //獲取的數(shù)據(jù)
? ? ? ? dataSourceList:[],//分頁后的數(shù)據(jù)
? ? ? ? /* 分頁參數(shù) */
? ? ? ? ipagination:{
? ? ? ? ? current: 1,//當前頁數(shù)
? ? ? ? ? pageSize: 6,
? ? ? ? ? pageSizeOptions: ['6', '10','20','30', '50'],
? ? ? ? ? showTotal: (total, range) => {
? ? ? ? ? ? return range[0] + "-" + range[1] + " 共" + total + "條"
? ? ? ? ? },
? ? ? ? ? showQuickJumper: true,
? ? ? ? ? showSizeChanger: true,
? ? ? ? ? total: 0
? ? ? ? },
? ? ? };
? ? },

獲取數(shù)據(jù)：

created() {
?? ?this.loadData(); ///獲取數(shù)據(jù)的方法
},

methods：

loadData(){
? ? ? ? getAction(this.URL).then((res)=>{
? ? ? ? ? if(res.success){
? ? ? ? ? ? this.dataSource = res.result.records;
? ? ? ? ? }else{
? ? ? ? ? ? this.$message.error(res.message)
? ? ? ? ? }
? ? ? ? }).finally(()=>{
? ? ? ? //獲取數(shù)據(jù)后調(diào)用一次分頁方法
? ? ? ? ? this.changeData(param.current,param.pageSize);//獲取數(shù)據(jù)后調(diào)用一次分頁方法
? ? ? ? })
? ? ? },
? ? ? // 頁碼改變的回調(diào)，參數(shù)是改變后的頁碼及每頁條數(shù)
? ? ? pageChange(page,pageSize){
? ? ? ? this.changeData(page,pageSize);
? ? ? },
? ? ? // 下拉選項改變， 參數(shù)是改變后的頁碼及每頁條數(shù)
? ? ? onShowSizeChange(current, pageSize) {
? ? ? ? this.ipagination.pageSize = pageSize;
? ? ? ? this.changeData(current,pageSize);
? ? ? },
? ? ? // 分頁改變時,獲取對應的數(shù)據(jù)，動態(tài)改變數(shù)據(jù)
? ? ? changeData(page,pageSize){
? ? ? ? var p = (page - 1)*pageSize;
? ? ? ? var pSize = page*pageSize;
? ? ? ? var dataSourceList = [];
? ? ? ? this.dataSource.forEach((item,index)=>{
? ? ? ? ? if(p<= index && index< pSize){
? ? ? ? ? ? dataSourceList.push(item)
? ? ? ? ? }
? ? ? ? })
? ? ? ? this.dataSourceList = dataSourceList;
? ? ? }

主要是后面幾個方法，changeData是改變的具體方法。

方式二

用computed 屬性計算

? computed: {
? ? TableData() {
? ? ? return this.teacherList.slice(
? ? ? ? (this.pagination.page - 1) * this.pagination.limit,
? ? ? ? this.pagination.page * this.pagination.limit
? ? ? );
? ? },
? },