11月17日总结

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

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

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

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

Element-Plus分页组件使用

<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" />

js代码，先初始化变量。

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

//表格数据生成

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

}