elementUI的el-pagination分页

最新推荐文章于 2025-05-08 09:30:00 发布

指标满载

最新推荐文章于 2025-05-08 09:30:00 发布

阅读量1.5k

点赞数 1

文章标签： pagination 分页

本文链接：https://blog.youkuaiyun.com/weixin_44770377/article/details/104795800

版权

本文详细解析了ElementUI中的el-pagination分页组件，重点介绍了@size-change和@current-change事件，以及page-sizes、page-size、total和layout属性的使用。@size-change事件在每页显示条数改变时触发，@current-change事件在当前页码变化时触发。page-sizes用于定义每页显示的条数选项，page-size指定默认每页条数。total参数表示总条数，layout控制分页组件的显示内容，包括上一页、下一页、页码列表等元素。

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

<el-pagination  :current-page="pagination.currentPage"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :page-sizes="pagination.pageSizes"
                                :page-size="pagination.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="pagination.total"></el-pagination>

data() {
            return {
                pagination: {
                  total: 0, // 总页数
                  currentPage: 1, // 当前页数
                  pageSize: 20, // 每页显示多少条
                  pageSizes:[10,20,30,40], // 每页显示多少条
                },
             }
}

methods: {
          handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
          },
          //当前页码改变时触发的函数，即你点击 1 ， 2 ， 3 ，它就跳到相应的数据页
          handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
          },
 }

@size-change：当每页显示的条数发生改变是触发，即：原先显示5条/页，现在改成了10条/页
@current-change：当前页码改变时触发的函数，即你点击 1 ， 2 ， 3 ，它就跳到相应的数据页

:page-sizes：上图中的每页显示的条数2/4/6/8/10的选项设置，这些2,4,6…其实是在:page-sizes属性中定义的。

:page-size：每页显示的数据的条数。当我们点击@size-change事件，然后从:page-sizes中选择相应的条数，element会将我们选中的条数赋值给属性:page-size，然后去后台查询数据。

:total 分页导航中显示的总条数。是在后台查询数据后才赋值的

layout：表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素