在Vue3中使用Element-Plus分頁（Pagination ）元件

離人非淺發表於2023-11-19
Vue元件

在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()
})

到這裡就可以測試檢視一下了

  • 初次載入

  • 點選頁碼，頁面跳轉

  • 測試這裡的輸入跳轉功能也沒問題，總資料也正常

完成！

相關文章