elementUI的el-pagination分页

最新推荐文章于 2024-09-30 16:08:58 发布

指标满载

最新推荐文章于 2024-09-30 16:08:58 发布

阅读量1.4k

点赞数 1

文章标签： pagination 分页

本文链接：https://blog.csdn.net/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控制分页组件的显示内容，包括上一页、下一页、页码列表等元素。

摘要由CSDN通过智能技术生成

<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} 条`);
          },
          //当前页码改变时触发的函数࿰