vue+ElementUI分页

最新推荐文章于 2023-08-16 16:53:21 发布

原创最新推荐文章于 2023-08-16 16:53:21 发布 · 276 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui #vue-cli3

分页同时被 2 个专栏收录

1 篇文章

订阅专栏

elementUI分页

1 篇文章

订阅专栏

本文介绍了如何在Vue.js应用中实现分页功能，通过`el-pagination`组件结合`currentPage`、`pageSize`和`total`属性，动态显示表格数据。在`size-change`和`current-change`事件中处理每页大小改变和页码切换，确保数据正确加载。代码简洁高效，适合初学者参考。

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

废话不多说直接上代码
table数据：

:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" //最重要的

data()数据

currentPage: 1, // 当前页码
            total: 20, // 总条数
            pageSize: 10, // 每页的数据条数

分页组件
```xml
<el-pagination align='center' 
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange" 
      :current-page="currentPage" :page-sizes="[1,5,10,20]" 
      :page-size="pageSize" 
      layout="total, sizes, prev, pager, next, jumper" 
      :total="tableData.length">
            </el-pagination>

methods:

handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.currentPage = 1;
            this.pageSize = val;
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
        }