纯前端实现表格的分页
代码如下
//设置一个变量接收获取的表格数据,后续不再重新获取
const gridData = ref([])
//请求表格数据
const getData = () => {
loading.value = true
saleReceiptDetailsApi()
.getList(searchData)
.then((res: any) => {
gridData.value = res.data
//开始只展示页面尺寸大小数据,这里切割
state.tableData = res.data.slice(0, searchData.pageSize)
searchData.totalPage = Math.ceil(res.total / searchData.pageSize)
searchData.total = res.total
loading.value = false
})
}
// 点击分页
const pageChange = (page: number) => {
searchData.pageNumber = page
//这里切割出点击所在页的数据
state.tableData = gridData.value.slice(
searchData.pageSize * (page - 1),
searchData.pageSize * page,
)
}
//点击更改每页尺寸大小
const handleSizeChange = (pageSize: any) => {
searchData.pageSize = pageSize
searchData.totalPage = Math.ceil(searchData.total / searchData.pageSize)
state.tableData = gridData.value.slice(
pageSize * (searchData.pageNumber - 1),
pageSize * searchData.pageNumber,
)
}