快捷導(dǎo)航

Vue3中Element-Plus分頁(yè)(Pagination)組件的使用

更新時(shí)間：2023年11月20日 08:48:08 作者：離人非淺

Element-Plus分頁(yè)(Pagination)組件在開發(fā)過(guò)程中數(shù)據(jù)展示會(huì)經(jīng)常使用到,同時(shí)分頁(yè)功能也會(huì)添加到頁(yè)面中,下面我們就來(lái)學(xué)習(xí)一下它的具體使用,需要的可以參考一下

開發(fā)過(guò)程中數(shù)據(jù)展示會(huì)經(jīng)常使用到，同時(shí)分頁(yè)功能也會(huì)添加到頁(yè)面中。

記：在Vue3中使用Element-Plus分頁(yè)組件與表格數(shù)據(jù)實(shí)現(xiàn)分頁(yè)交互。

開始實(shí)現(xiàn)

引入表格和分頁(yè)組件的H5標(biāo)簽。

<strong>Element-Plus分頁(yè)組件使用</strong>
<div>
	<el-table :data="tableData" style="width: 100%">
	    <el-table-column prop="id" label="這里是id" width="180" />
	    <el-table-column prop="data" label="這里是一些數(shù)據(jù)" 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>

js代碼，先初始化變量。

<script setup>
import {ref,reactive,onMounted} from 'vue'
// tableData-表格數(shù)據(jù)列表，total-數(shù)據(jù)總長(zhǎng)度
const tableData=ref([])
const total=ref(0)
// searchData-向后端分頁(yè)查詢的對(duì)象，即當(dāng)前頁(yè)和每頁(yè)總數(shù)
const searchData=reactive({
	current:1,
	limit:10
})
...
</script>

沒(méi)用到后臺(tái)，所以就把表格的數(shù)據(jù)寫固定了。下面就表格數(shù)據(jù)生成，還有模擬對(duì)數(shù)據(jù)的分頁(yè)。

//表格數(shù)據(jù)生成
function tableAddData(){
	//給表格添加數(shù)據(jù)，調(diào)接口賦值同理
	var index=0
    //因?yàn)閿?shù)據(jù)是固定生成的，容易出錯(cuò)，所以這里要清一下
	tableData.value=[]
	for(var i=1;i<=101;i++){
		let data={}
		data.id=i
		data.data=`我的數(shù)據(jù)是：${i}`
		tableData.value.push(data)
		index+=1
	}
	total.value=index
}
//傳入分頁(yè)參數(shù)
function pageQuery(current,limit){
	// 模仿分頁(yè)查詢，將表格的數(shù)據(jù)裁切一下
	
	//     1     2     3
	//下標(biāo) 0-9 10-19 20-29
	let begin=current*limit-limit
	//這里不減一是因?yàn)?，slice方法裁切是左閉右開數(shù)組
	let end=current*limit
	tableData.value=tableData.value.slice(begin,end)
}

方法調(diào)用，這里需要注意幾個(gè)地方。

1. 第一次加載getData方法時(shí)，方法內(nèi)的默認(rèn)傳的參數(shù)是空的，所以就賦個(gè)1，不然不太友好。

2. 分頁(yè)組件的@current-change調(diào)用的方法默認(rèn)會(huì)傳入一個(gè)參數(shù)，即點(diǎn)擊的頁(yè)碼數(shù)。所以實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)，就要把分頁(yè)查詢參數(shù)的當(dāng)前頁(yè)current賦該值。

function getData(val = 1){
	searchData.current=val
	// 先把數(shù)據(jù)搞上
	tableAddData()
	pageQuery(searchData.current,searchData.limit)
}
 
onMounted(async()=>{
	getData()
})

到這里就可以測(cè)試查看一下了

初次加載

點(diǎn)擊頁(yè)碼，頁(yè)面跳轉(zhuǎn)

測(cè)試這里的輸入跳轉(zhuǎn)功能也沒(méi)問(wèn)題，總數(shù)據(jù)也正常

到此這篇關(guān)于Vue3中Element-Plus分頁(yè)(Pagination)組件的使用的文章就介紹到這了,更多相關(guān)Vue3 Element-Plus分頁(yè)組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: