vue element 翻页加载效果

最新推荐文章于 2024-05-28 14:09:02 发布

宅序员

最新推荐文章于 2024-05-28 14:09:02 发布

阅读量681

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_42471718/article/details/103638678

本文介绍如何在Vue项目中结合Element UI实现分页加载功能。内容包括模板代码、数据处理、初始化渲染及方法的详细说明，通过一次性获取所有数据后进行分页处理，利用Element的分页组件提供丰富的选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element翻页效果

自己放一个表格在上面这里做一个假分页，就是数据一次性拿到手，然后去处理数据进行分页，做两个数组，一个是渲染表格的数组一个是获取到的数据的数组
然后我们这里面直接引用一下element里面的分页布局，我们选那个功能比较全面的，有条数选择。

template代码

<el-pagination
      @current-change="handleCurrentChange"
      @size-change="sizeChang"
      :page-sizes="[5, 10, 12, 15]"  可选页数显示
      :page-size="5"   页数显示
      :current-page="pageConf.currentPage"  绑定
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageConf.totalPage">  绑定
</el-pagination>

data数据

pageConf:{//分页
    totalPage:0,	总共有多少条数据
    pageSize: 5,	一页显示几条
    currentPage:1  当前页
}

created初始渲染

created(){
    //初始渲染分页数据
    this.getTableData(1)  这里调用的是文章下面的方法
}

methods方法

//获取数据
getTableData(page){  单独把获取数据拿出来是因为我还做了增删功能 无页面刷新更新数据需要调用
    tableData().then((res)=>{  这个是我上面调用来的一个接口 返回一个promise函数
        this.Data = res.data.users
        this.pageConf.totalPage = res.data.users.length
        this.handleCurrentChange(page)
    })
},
//页数改变
handleCurrentChange(page){//分页显示数据 伪分页
    this.pageConf.currentPage = page
    this.tableData = [...this.Data].slice(
        (page-1)*this.pageConf.pageSize,page*this.pageConf.pageSize
    )
},
//每页数量改变
sizeChang(pageLen){
    this.pageConf.pageSize = pageLen
    this.handleCurrentChange(this.pageConf.currentPage)
}

就这么多，功能还是蛮轻松的下面附上增删代码

//删除
delData(id){
    delFromTableData({id}).then((res)=>{
        if (res.status == "200") {   
            if ((this.pageConf.currentPage-1)*this.pageConf.pageSize == this.pageConf.totalPage-1) {   
            这个你要是不判断的话 你在最后一页删除完数据之后会停留在最后一页 
            然后没有数据 这个会阻止这种事情发生
            这个就是把当前页数传进去就可以留在当前页面
                this.getTableData(this.pageConf.currentPage-1)
            } else {
                this.getTableData(this.pageConf.currentPage)
            }
        }
    })
},
//添加
addsure(){
    this.dialogVisible = false
    addDataToTable(this.addData).then((res)=>{
        if (res.data.status == "200") {
            this.getTableData(this.pageConf.currentPage)
        }
    })
},