vue+ElementUI分页

object、

于 2021-06-20 21:59:50 发布

阅读量254

点赞数 1

CC 4.0 BY-SA版权

分类专栏：分页 elementUI分页文章标签： vue elementui vue-cli3

本文链接：https://blog.youkuaiyun.com/o_b_j_e_c_t/article/details/118075781

分页同时被 2 个专栏收录

1 篇文章

订阅专栏

elementUI分页

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

废话不多说直接上代码
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;
        }