在Vue3中使用Element-Plus分頁(Pagination )組件

来源:https://www.cnblogs.com/7456Ll/archive/2023/11/19/17842820.html
-Advertisement-
Play Games

在Vue3中使用Element-Plus分頁(Pagination )組件 開發過程中數據展示會經常使用到,同時分頁功能也會添加到頁面中。 記:在Vue3中使用Element-Plus分頁組件與表格數據實現分頁交互。 開始實現 引入表格和分頁組件的H5標簽。 <strong>Element-Plus ...


在Vue3中使用Element-Plus分頁(Pagination )組件

開發過程中數據展示會經常使用到,同時分頁功能也會添加到頁面中。

記:在Vue3中使用Element-Plus分頁組件與表格數據實現分頁交互。

開始實現

  1. 引入表格和分頁組件的H5標簽。
<strong>Element-Plus分頁組件使用</strong>
<div>
	<el-table :data="tableData" style="width: 100%">
	    <el-table-column prop="id" label="這裡是id" width="180" />
	    <el-table-column prop="data" label="這裡是一些數據" width="180" />
	</el-table>
	<el-pagination
	:current-page="searchData.current"
	:page-size="searchData.limit"
	:total="total"
	:pager-count="6"
	style="text-align: center;margin-top: 20px;"
	layout="jumper, prev, pager, next, total"
	@current-change="getData" />
</div>
  1. js代碼,先初始化變數。
<script setup>
import {ref,reactive,onMounted} from 'vue'
// tableData-表格數據列表,total-數據總長度
const tableData=ref([])
const total=ref(0)
// searchData-向後端分頁查詢的對象,即當前頁和每頁總數
const searchData=reactive({
	current:1,
	limit:10
})
...
</script>
  1. 沒用到後臺,所以就把表格的數據寫固定了。下麵就表格數據生成,還有模擬對數據的分頁。
//表格數據生成
function tableAddData(){
	//給表格添加數據,調介面賦值同理
	var index=0
    //因為數據是固定生成的,容易出錯,所以這裡要清一下
	tableData.value=[]
	for(var i=1;i<=101;i++){
		let data={}
		data.id=i
		data.data=`我的數據是:${i}`
		tableData.value.push(data)
		index+=1
	}
	total.value=index
}
//傳入分頁參數
function pageQuery(current,limit){
	// 模仿分頁查詢,將表格的數據裁切一下
	
	//     1     2     3
	//下標 0-9 10-19 20-29
	let begin=current*limit-limit
	//這裡不減一是因為,slice方法裁切是左閉右開數組
	let end=current*limit
	tableData.value=tableData.value.slice(begin,end)
}
  1. 方法調用,這裡需要註意幾個地方。

1. 第一次載入getData方法時,方法內的預設傳的參數是空的,所以就賦個1,不然不太友好。

2. 分頁組件的@current-change調用的方法預設會傳入一個參數,即點擊的頁碼數。所以實現點擊跳轉,就要把分頁查詢參數的當前頁current賦該值。

function getData(val = 1){
	searchData.current=val
	// 先把數據搞上
	tableAddData()
	pageQuery(searchData.current,searchData.limit)
}

onMounted(async()=>{
	getData()
})

到這裡就可以測試查看一下了

  • 初次載入

  • 點擊頁碼,頁面跳轉

  • 測試這裡的輸入跳轉功能也沒問題,總數據也正常

完成!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 關於Anolis8/Centos8系統重啟後ip地址不顯示的原因 版權聲明:原創作品,謝絕轉載!否則將追究法律責任。 ————— 作者:kirin #、今天把之前在VMware安裝的Anolis8系統重啟了,啟動之後發現Xshell連接不上。在VMware上登錄後執行ip a命令發現ip地址不見了 ...
  • DX後臺截圖C++實現代碼 文章僅發佈於https://www.cnblogs.com/Icys/p/DXGI.html和知乎上。 傳統的GDI API (BitBlt)雖然可以完美的完成後臺截圖的任務,但是歸根結底效率還是太低。 直接使用DXGI方法截圖只能完成前臺視窗的截圖,而DX HOOK的截 ...
  • 目錄前言一、使用的元器件二、模擬圖三、項目分析四、代碼編寫總結 前言 這個項目主要針對於選擇的人們作息不規律而設計的一個項目,這個項目是使用stm32f103系列的晶元來製作的(R6和C8)都可以使用。 一、使用的元器件 DS1302時鐘晶元 STM32F103R6 按鍵 LCD1602顯示屏 蜂鳴 ...
  • 命令行交互 命令行交互一般是學習資料庫的第一步,不過這些命令在後續用的比較少,瞭解即可。 角色命令 創建角色 use admin db.createUser({"user": "root", "pwd": passwordPrompt(), "roles": [{role:"role",db:"<d ...
  • SQL INSERT INTO 語句用於在表中插入新記錄。 INSERT INTO 語法 可以以兩種方式編寫INSERT INTO語句: 指定要插入的列名和值: INSERT INTO 表名 (列1, 列2, 列3, ...) VALUES (值1, 值2, 值3, ...); 如果要為表的所有列添 ...
  • AND 運算符 SQL的AND運算符用於根據多個條件篩選記錄,確保所有條件都為TRUE才返回記錄。下麵是AND運算符的基本語法: SELECT column1, column2, ... FROM table_name WHERE condition1 AND condition2 AND cond ...
  • DM8壓縮表 0、結論 行表(普通表)不支持壓縮。但是語法支持。建表之後,查詢到的占用空間會比普通表小一半。 經過測試,裝10萬數據(兩個欄位),壓縮的、未壓縮,占用空間一樣大。 列表(huge表)支持壓縮。可以壓縮表(就是壓縮所有列),也可以選擇壓縮列。但是建表的時候就要設置,否則建好表之後修改不 ...
  • 前面多文介紹了Dart編程語言的基本語法和語言特性。從本文開始,我們通過一個Flutter App的編碼過程,完成Flutter的學習,包括Flutter基礎知識,Flutter App啟動頁,Tab頁,個人設置頁,SQLite資料庫,HTTP API調用,到最後Flutter App打包等…… ...
一周排行
    -Advertisement-
    Play Games
  • 在C#中使用SQL Server實現事務的ACID(原子性、一致性、隔離性、持久性)屬性和使用資料庫鎖(悲觀鎖和樂觀鎖)時,你可以通過ADO.NET的SqlConnection和SqlTransaction類來實現。下麵是一些示例和概念說明。 實現ACID事務 ACID屬性是事務處理的四個基本特征, ...
  • 我們在《SqlSugar開發框架》中,Winform界面開發部分往往也用到了自定義的用戶控制項,對應一些特殊的界面或者常用到的一些局部界面內容,我們可以使用自定義的用戶控制項來提高界面的統一性,同時也增強了使用的便利性。如我們Winform界面中用到的分頁控制項、附件顯示內容、以及一些公司、部門、菜單的下... ...
  • 在本篇教程中,我們學習瞭如何在 Taurus.MVC WebMVC 中進行數據綁定操作。我們還學習瞭如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。通過這些步驟,我們成功實現了一個簡單的數據綁定示例。 ...
  • 是在MVVM中用來傳遞消息的一種方式。它是在MVVMLight框架中提供的一個實現了IMessenger介面的類,可以用來在ViewModel之間、ViewModel和View之間傳遞消息。 Send 接受一個泛型參數,表示要發送的消息內容。 Register 方法用於註冊某個對象接收消息。 pub ...
  • 概述:在WPF中,通過EventHandler可實現基礎和高級的UI更新方式。基礎用法涉及在類中定義事件,併在UI中訂閱以執行更新操作。高級用法藉助Dispatcher類,確保在非UI線程上執行操作後,通過UI線程更新界面。這兩種方法提供了靈活而可靠的UI更新機制。 在WPF(Windows Pre ...
  • 概述:本文介紹了在C#程式開發中如何利用自定義擴展方法測量代碼執行時間。通過使用簡單的Action委托,開發者可以輕鬆獲取代碼塊的執行時間,幫助優化性能、驗證演算法效率以及監控系統性能。這種通用方法提供了一種便捷而有效的方式,有助於提高開發效率和代碼質量。 在軟體開發中,瞭解代碼執行時間是優化程式性能 ...
  • 概述:Cron表達式是一種強大的定時任務調度工具,通過配置不同欄位實現靈活的時間規定。在.NET中,Quartz庫提供了簡便的方式配置Cron表達式,實現精準的定時任務調度。這種靈活性和可擴展性使得開發者能夠根據需求輕鬆地制定和管理定時任務,例如每天備份系統日誌或其他重要操作。 Cron表達式詳解 ...
  • 概述:.NET提供多種定時器,如System.Windows.Forms.Timer適用於UI,System.Web.UI.Timer用於Web,System.Diagnostics.Timer用於性能監控,System.Threading.Timer和System.Timers.Timer用於一般 ...
  • 問題背景 有同事聯繫我說,在生產環境上,訪問不了我負責的common服務,然後我去檢查common服務的health endpoint, 沒問題,然後我問了下異常,timeout導致的System.OperationCanceledException。那大概率是客戶端的問題,會不會是埠耗盡,用ne ...
  • 前言: 在本篇 Taurus.MVC WebMVC 入門開發教程的第四篇文章中, 我們將學習如何實現數據列表的綁定,通過使用 List<Model> 來展示多個數據項。 我們將繼續使用 Taurus.Mvc 命名空間,同時探討如何在視圖中綁定並顯示一個 Model 列表。 步驟1:創建 Model ...