ant design Vue 純前端實(shí)現(xiàn)分頁(yè)問(wèn)題

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

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

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

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

自己想的一個(gè)簡(jiǎn)單方法

通過(guò)頁(yè)碼改變事件，每頁(yè)數(shù)據(jù)個(gè)數(shù)改變事件，獲取改變后的頁(yè)碼，每頁(yè)條數(shù)，獲取數(shù)組中對(duì)應(yīng)的數(shù)據(jù)。

代碼如下：

html：

<template>
? <div>
? ? <h3>學(xué)習(xí)文件</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>
? ? <!-- 分頁(yè) -->
? ? <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>暫無(wú)文件</p>
? ? </div>
? </div>
</template>

data：

data() {
? ? ? return {
? ? ? ? description: '文件列表組件',
? ? ? ? dataSource:[], //獲取的數(shù)據(jù)
? ? ? ? dataSourceList:[],//分頁(yè)后的數(shù)據(jù)
? ? ? ? /* 分頁(yè)參數(shù) */
? ? ? ? ipagination:{
? ? ? ? ? current: 1,//當(dāng)前頁(yè)數(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)用一次分頁(yè)方法
? ? ? ? ? this.changeData(param.current,param.pageSize);//獲取數(shù)據(jù)后調(diào)用一次分頁(yè)方法
? ? ? ? })
? ? ? },
? ? ? // 頁(yè)碼改變的回調(diào)，參數(shù)是改變后的頁(yè)碼及每頁(yè)條數(shù)
? ? ? pageChange(page,pageSize){
? ? ? ? this.changeData(page,pageSize);
? ? ? },
? ? ? // 下拉選項(xiàng)改變， 參數(shù)是改變后的頁(yè)碼及每頁(yè)條數(shù)
? ? ? onShowSizeChange(current, pageSize) {
? ? ? ? this.ipagination.pageSize = pageSize;
? ? ? ? this.changeData(current,pageSize);
? ? ? },
? ? ? // 分頁(yè)改變時(shí),獲取對(duì)應(yīng)的數(shù)據(jù)，動(dòng)態(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;
? ? ? }

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

方式二

用computed 屬性計(jì)算

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