思路：查看leanCloud文档去封装API接口，使用Element-plus分页组件完成页面渲染，通过页面调用接口实现分页
API
//查询获取生活馆的数据
// count=1开启计数功能
// limit 每页条数限制，skip划到多少条后开始显示，
export const findLiveAll= async(page=1,current=10)=>{
let pages=(page-1)*10
let res=await requests.get(`classes/live?limit=${current}&count=1&skip=${pages}`)
console.log("获取数据库中数据",res)
return res.data
}
JS
// 页面分页
// 总页数
const total =ref(1)
// 当前页码
const currentPage = ref(1)
// 每页多少条数据
const pageSize = ref(10)
// 切换每页显示过少条数据
const pages=currentPage.value
const handleSizeChange =async (current) => {
let data=await findLiveAll(currentPage.value,current)
lives.value=data.results //从新渲染数据
}
// 切换页方法,page为当前页
const handleCurrentChange = async(page) => {
console.log(`current page: ${page}`)
let data=await findLiveAll(page,pageSize.value)
lives.value=data.results //从新渲染数据
}telement
<!-- 分页UI
三变量，两方法
currentPage 当前第几页
pageSize 当前页有多少条数据
tatal 总数据量
handleSizeChange 改变当前页数据量的方法
handleCurrentChange 改变页面的变量
layout布局
background是否有背景
-->
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 30, 40]"
background
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
class="page"
/>
