VUE +Element-plus+leanCloud 分页逻辑

最新推荐文章于 2025-07-23 15:24:37 发布

原创最新推荐文章于 2025-07-23 15:24:37 发布 · 338 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

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

 // 页面分页
//  总页数
 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"
    />