Vue实现分页功能

最新推荐文章于 2024-04-26 17:54:13 发布

nk妹妹

最新推荐文章于 2024-04-26 17:54:13 发布

阅读量3.2k

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44563460/article/details/126095110

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

在vue文件中实现分页功能需要修改template和script。
其中template中加入，其中el-table中绑定的数据为showTableData

<div class="pageStyle">
                <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="numberPerPage" :total="total"  margin-top="100px">
                </el-pagination>
 </div>

script中加入

methods: {
        async getShopList(){
            let result = await this.$http.getShopList();
            this.tableData = result.data.list;
            this.showTableData = result.data.list.slice(0,this.numberPerPage);
            this.total = result.data.list.length;
        },
        handleCurrentChange(currentindex){
            // console.log(currentindex);
            this.showTableData = this.tableData.slice((currentindex-1)*5, currentindex*5)
            // console.log(this.tempTableData);
        },
        created() {
            this.currentdata = this.contentdata.slice(0, 6)
        },
    },
    data() {
        return {
            tableData: [],  
            total:0,
            showTableData:[],
            numberPerPage:5,  //希望每页展示的数据个数
        };
    },