快捷導(dǎo)航

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

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

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

需求

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

效果一共42萬條，每頁20條，最多顯示100頁

一共1069條，每頁100條，共11頁

問題

在使用elementUI的Pagination分頁時遇到了問題，通常使用的是total，但是很顯然total不符合要求，page-count只介紹了這么用，沒有案例。

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

解決方法

解決問題一：不在分頁中使用total，在分頁標(biāo)簽外加一個盒子，使用定位將total等位到合適的地方。
解決問題二：page-count使用動態(tài)設(shè)置，分頁與初始化時計算，總條數(shù)/每頁條數(shù)，向上取整，得到的就是總頁數(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, // 總頁數(shù)
	        limit: 20, // 每頁多少條
	        total: 0, // 總條數(shù)
	        page: 1 // 第幾頁
		}
	},
	created() {
		this.init()
	},
	methods: {
		init() {
			api.init().then(res => {
				// 其他邏輯
				...
				// 分頁邏輯
				this.pagination.page = res.page
			    this.pagination.limit = res.limit
			    this.pagination.total = res.total
			    const page = Math.ceil(res.total / res.limit) // 可以分多少頁（向上取整）
			    if (page > 100) { // 最大100頁
				    this.pagination.pageCount = 100
			    } else {
			        this.pagination.pageCount = page
			    }
			}
		},
		// 分頁
	    handleCurrentChange(val) {
	      this.pagination.page = val
	      ...
	    },
	    // 每頁多少條
	    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 分頁指定最大頁（page-count）的文章就介紹到這了,更多相關(guān)elementUI Pagination 分頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: