VUE+ElementUI实现前端分页

VUE_ElementUI前端分页

---

参考了这位大佬的博客（https://blog.csdn.net/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.data