快捷導(dǎo)航

elementUI Pagination 分頁(yè)指定最大頁(yè)的問(wèn)題及解決方法(page-count)

更新時(shí)間：2024年08月09日 10:50:43 作者：xuelong-ming

項(xiàng)目中遇到數(shù)據(jù)量大,查詢的字段多,但用戶主要使用的是最近的一些數(shù)據(jù),1萬(wàn)條以后的數(shù)據(jù)一般不使用,這篇文章主要介紹了elementUI Pagination 分頁(yè)指定最大頁(yè)的問(wèn)題及解決方法(page-count),需要的朋友可以參考下

需求

項(xiàng)目中遇到數(shù)據(jù)量大，查詢的字段多，但用戶主要使用的是最近的一些數(shù)據(jù)，1萬(wàn)條以后的數(shù)據(jù)一般不使用。用戶查詢時(shí)，頁(yè)碼越大，接口需要的時(shí)間越久，對(duì)用戶與服務(wù)器都不友好。
為解決該問(wèn)題，前端分頁(yè)最多100頁(yè)（當(dāng)然也可以自己設(shè)置），每頁(yè)最多100條，這樣就可以解決這個(gè)問(wèn)題。

效果一共42萬(wàn)條，每頁(yè)20條，最多顯示100頁(yè)

一共1069條，每頁(yè)100條，共11頁(yè)

問(wèn)題

在使用elementUI的Pagination分頁(yè)時(shí)遇到了問(wèn)題，通常使用的是total，但是很顯然total不符合要求，page-count只介紹了這么用，沒(méi)有案例。

問(wèn)題一：total與page-count只能使用一個(gè)，兩個(gè)都用的話page-count不生效，而只使用page-count的話又不顯示總頁(yè)數(shù)。
問(wèn)題二：在搜索時(shí)，搜索到的總條數(shù)total可能很少，這時(shí)還是顯示的page-count設(shè)置的總頁(yè)數(shù)。例如：page-count設(shè)置的100，總條數(shù)只有100條，每頁(yè)顯示20條，這時(shí)還是100頁(yè)，只是從第六頁(yè)開(kāi)始沒(méi)有數(shù)據(jù)。

解決方法

解決問(wèn)題一：不在分頁(yè)中使用total，在分頁(yè)標(biāo)簽外加一個(gè)盒子，使用定位將total等位到合適的地方。
解決問(wèn)題二：page-count使用動(dòng)態(tài)設(shè)置，分頁(yè)與初始化時(shí)計(jì)算，總條數(shù)/每頁(yè)條數(shù)，向上取整，得到的就是總頁(yè)數(shù)（page-count）。

代碼

HTML

<div class="table-pagination">
	<el-pagination 
		@size-change="handleSizeChange" 
		@current-change="handleCurrentChange" 
		:page-count="pagination.pageCount" 
		:current-page="pagination.page" 
		:page-sizes="[10, 20, 50, 100]" 
		:page-size="pagination.limit" 
		layout="sizes, prev, pager, next, jumper" />
	<div class="total">總共 {{ pagination.total }} 條</div>
</div>

JS

import api from './api'
export default {
	data() {
		pagination: {
	        pageCount: 100, // 總頁(yè)數(shù)
	        limit: 20, // 每頁(yè)多少條
	        total: 0, // 總條數(shù)
	        page: 1 // 第幾頁(yè)
		}
	},
	created() {
		this.init()
	},
	methods: {
		init() {
			api.init().then(res => {
				// 其他邏輯
				...
				// 分頁(yè)邏輯
				this.pagination.page = res.page
			    this.pagination.limit = res.limit
			    this.pagination.total = res.total
			    const page = Math.ceil(res.total / res.limit) // 可以分多少頁(yè)（向上取整）
			    if (page > 100) { // 最大100頁(yè)
				    this.pagination.pageCount = 100
			    } else {
			        this.pagination.pageCount = page
			    }
			}
		},
		// 分頁(yè)
	    handleCurrentChange(val) {
	      this.pagination.page = val
	      ...
	    },
	    // 每頁(yè)多少條
	    handleSizeChange(val) {
	      this.pagination.page = 1
	      this.pagination.limit = val
	      ...
	    }
	}
}

CSS

  .table-pagination {
    position: relative;
    margin-top: 10px;
    .total {
      position: absolute;
      right: 10px;
      bottom: 0;
    }
  }

到此這篇關(guān)于elementUI Pagination 分頁(yè)指定最大頁(yè)（page-count）的文章就介紹到這了,更多相關(guān)elementUI Pagination 分頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: