VUE+ElementUI实现前端分页

最新推荐文章于 2024-01-22 17:34:45 发布

算云烟

最新推荐文章于 2024-01-22 17:34:45 发布

阅读量3k

点赞数 13

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/zxcbnm7089/article/details/111547368

本文介绍了如何使用VUE和ElementUI实现前端分页功能，参考了相关博客并进行了个人实践。内容包括定义变量、创建数据初始化方法、methods属性中的分页处理方法，以及页面结构的搭建。通过这些步骤，实现了前端组件分页功能，支持每页条数和页码的动态切换。

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

VUE_ElementUI前端分页

参考了这位大佬的博客（https://blog.youkuaiyun.com/qq_42707611/article/details/102621081），经过自己的修改，与elementui分页插件相结合，实现了前端组件分页

效果图如下：
在这里插入图片描述

每页几条，前往几页，均可使用。下面直接上代码

一、定义变量

data(){
   
   
    return {
   
   
        // 权限列表，向后台请求数据获取，看起来格式应该是这样的[{},{},{}]
        rightsList:[],
        // 分页数据,这里用来保存每页切割后的数据
        // 看起来格式是这样的[[{},{},{}],[{},{},{}]]
        // 数组内套数组，每个数组就是一页数据
        totalPageData: [],
        // 共几页
        pageNum:1,
        // 每页显示数量
        pageSize:5,
        // 当前显示页码
        currentPage:1,
        // 总共多少条数据
        total:1,
        // 当前要显示的数据
        dataShow:[]
    }
}

二、创建方法

1.初始化数据

// 如果想要组件在创建时就赋予数据，那么就应该在created生命周期调用
created() {
   
   
    // 调用Method封装好的方法
    this.getRightsList();
}

2.methods属性定义的方法

定义获取列表数据的方法

getRightsList(){
   
   
    // 获取列表数据
    this.$axios.get('/rights/list')
        .then(res => {
   
   
        // 处理结果，根据自己业务接口返回结构赋值数据
        if(res.data.meta.status === 200){
   
   
            console.log('数据总数:',res.data.data.length);
            this.total = res