Element-UI Pagination 分页

最新推荐文章于 2025-06-15 13:16:41 发布

xuexuan_050848

最新推荐文章于 2025-06-15 13:16:41 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/xuexuan_050848/article/details/84111489

本文详细解析了 Element UI 中的分页组件使用方法，包括布局配置、属性说明及事件处理，如 total、current-page.sync 和 current-change 事件，帮助开发者更好地掌握分页功能。

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

<el-pagination layout="total, prev, pager, next" background :total="total" :current-page.sync="pageNo" @current-change="handleCurrentChange($event,2)"></el-pagination>

data(){
	return{
		total : 0,
		pageNo : 1,
		pageSize : 10
	}
},
method(){
	handleCurrentChange(val,type){// val为回调参数：current-page值，type为自定义参数
		this.pageNo = val;
		...请求数据
	}
}

常用属性

layout：需要显示的内容，用逗号分隔，布局元素会按顺序依次显示
- prev ：上一页
- pager：页码列表
- next：下一页
- total：总条目数
background：为分页按钮添加背景色（boolean 默认false）
total：数据总数
current-page.sync：当前页数（该页码显示为选中状态）