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

}