vue + element 分页组件使用 以及实现刷新后页码不掉

1 分页组件初步介绍

分页组件最主要的参数有三个

1. current-page 当前页数,也就是当前的页面的页码,这是刷新后仍在当前页的关键参数
2. page-size 每页显示条目个数，注意别和 page-size 搞混
3. total 总条目数 就是所有数据的总量
   注: 以上参数的值皆为 number 类型,为什么要强调这个呢?因为在刷新的时候会用到
   其余的参数
   ~ background boolean 是否为分页按钮添加背景色
   ~ layout string 组件布局，子组件名用逗号分隔
   ~ current-change currentPage 改变时会触发的事件

 <el-pagination
                    background
                    layout="prev, pager, next"
                    :current-page="pageNum"
                    :page-size="10"
                    :total="pageTotal"
                    @current-change="changePage">
 </el-pagination>

2 分页组件的使用

1

// 设置 当前页数为 1 
 private pageNum = 1;

2
要实现刷新后页码不掉功能,关键在于 pageNum 这个值得获取,这里我将 page 的值放在 query 中,给了 page 这个参数,如图所示
注:此时 page 的值为 string,不是太懂为啥 query 传不了 number ,我写 number 类型就报错,因此改为 string

3
在 created 生命周期里获取这个 pageNum 的值

  private created() {
        this.pageNum = this.$route.query?.page ? parseInt(this.$route.query.page as string) : 1;
    }

4
在点击 分页按钮 的时候将当前页面传入 query 中的 page 中

  private changePage(pageNum: number) {
        this.$router.push({query: {page: pageNum.toString()}});
    }

5
刷新后页码不掉 关键步骤 监听 query 的变化

// 获取数据的方法
@Watch（$route.query ,{ immediate: true}）
 private geData() {
    this.pageNum = (this.$route.query && ~~(this.$route.query.page as string)) || 1;
	...xxxx ajax 获取数据xxx...
}

总结

大概就是这样了,关于这个还有什么不懂的,或者没有实现的,可以在评论区问我,虽然我很菜,但是教学相长嘛,嘿嘿.