在Vue3中使用Element-Plus分页（Pagination ）组件

开发过程中数据展示会经常使用到，同时分页功能也会添加到页面中。

记：在Vue3中使用Element-Plus分页组件与表格数据实现分页交互。

开始实现

引入表格和分页组件的H5标签。

Element-Plus分页组件使用

js代码，先初始化变量。


import {ref,reactive,onMounted} from 'vue'
// tableData-表格数据列表，total-数据总长度
const tableData=ref([])
const total=ref(0)
// searchData-向后端分页查询的对象，即当前页和每页总数
const searchData=reactive({
	current:1,
	limit:10
})
...

没用到后台，所以就把表格的数据写固定了。下面就表格数据生成，还有模拟对数据的分页。

//表格数据生成
function tableAddData(){
	//给表格添加数据，调接服务器托管网口赋值同理
	var index=0
    //因为数据是固定生成的，容易出错，所以这里要清一下
	tableData.value=[]
	for(var i=1;i

方法调用，这里需要注意几个地方。

1. 第一次加载getData方法时，方法内的默认传的参数是空的，所以就赋个1，不然不太友好。

2. 分页组件的@current-change调用的方法默认会传入一个参数，即点击的页码数。所以实现点击跳转，就要把分页查询参数的当前页current赋该值。

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

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