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

在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,  //希望每页展示的数据个数
        };
    },
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐