vue前端分页代码实现

最新推荐文章于 2024-01-19 11:29:22 发布

习惯了海飞丝

最新推荐文章于 2024-01-19 11:29:22 发布

阅读量282

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_41921378/article/details/120533088

版权

本文介绍了如何在Vue应用中实现页面分页功能，包括使用HTML构建页面布局，通过axios进行API调用获取数据，并展示首尾页、上一页、下一页的控制。重点讲解了`findAll`方法和`toPage`方法的实现以及数据更新的处理。

摘要由CSDN通过智能技术生成

Html：

<div class="pageNum">
    <button @click="firstPage">首页</button>
    <button @click="backPage">上一页</button>
    <ul>
       <li :class="{active:page===currentPage}" v-for="page in totalPage" @click="toPage(page)">{{page}}
       /li>
     </ul>
     <button @click="forwardPage">下一页</button>
     <button @click="lastPage">尾页</button>
</div>

vue代码：

<script>
    new Vue({
        el: "#pageNum",
        data: {
            //分页参数

            currentPage: 1, //当前页
            pageSize: 6,  //页容量
            totalPage: '',//总页数
            totalCount: '',//总记录数
            courseList: '',//接收后台发送的数据容器
        },
        methods: {
            //分页_搜索
            findAll() {
                var url = "http://localhost:8080/edu/courses";
                axios.get(url, {
                    params: {
                        method: "findAll",
                        //分页                   
                        currentPage: this.currentPage,
                        pageSize: this.pageSize,
                    }
                })
                    .then(res => {
                        console.log(res);
                        this.currentPage = res.data.obj.currentPage
                        this.pageSize = res.data.obj.pageSize
                        this.totalCount = res.data.obj.totalCount
                        this.totalPage = res.data.obj.totalPage
                        this.courseList = res.data.obj.data
                    })

            },
            /* 首页 */
            firstPage() {
                this.currentPage = 1;
                this.findAll();
            },
            /*  尾页 */
            lastPage() {
                this.currentPage = this.totalPage;
                this.findAll();
            },
            /* 上一页 */
            backPage() { 
                if (this.currentPage == 1) {
                    return;
                }
                this.currentPage = this.currentPage - 1;
                this.findAll();
            },
            /* 下一页 */
            forwardPage() {
                if (this.currentPage == this.totalPage) {
                   return;
                }
                this.currentPage = this.currentPage + 1;
                this.findAll();
            },
            /* 跳转到xx页 */
            toPage(page){
                this.currentPage=page;
                this.findAll();
            },


        },
        created() {
            this.findAll();
        },

    })
</script>