vue+element+axios实现分页

Posted 2021-07-18 老张在线敲代码

之前更了一个react的分页效果，今天给大家发一个vue写的分页

先在全局main.js中引入element并使用

 import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);

然后在html中使用element-ui中的分页组件

//绑定函数
//通过数据的length渲染当前页的数据条数
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pagesize"
                        layout="total, sizes, prev, pager, next, jumper" :total="list.length">


</el-pagination>

接下来在data中分别设置默认值

 data() {
            return {
                list: [],//用来存放请求来的数据
                currentPage: 1, //初始页

                pagesize: 20, // 每页的数据

            }
        },

设置完默认值之后就在methods中开始写逻辑代码了

  methods: {
  //这一块是用来设置分页中每页要显示的数据
            handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize) 

            },
//这一块是设置当前用户点击的是第几页
            handleCurrentChange: function (currentPage) {
                this.currentPage = currentPage;
                this.handleUserList(currentPage)
            },
//最后用axios请求对应接口数据，并设置每页中要渲染多少条数据
            handleUserList(page = 1) {
                console.log(page)
                //总条数
                axios.get("http://localhost:3000/album/new", {
                    params: {
                        limit: 20,
                        //设置分页数据偏移量，这一块是用的官方的一个api，没有这个api的话需要自己去计算
                        offset: (page - 1) * 20
                    }
                }).then((res) => {
                    console.log(res.data, "推荐")
                    this.list = res.data.albums
                    //返回对应数据
                });

            }
        },

最后在mounted函数中调用axios请求数据的函数

  mounted() {

            this.handleUserList()
        },

打完收工！今天的分享就到这儿啦！谢谢大家支持！