思路:查看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