vue 分页 Pagination

大家好，又见面了，我是你们的朋友全栈君。

代码语言：javascript复制

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

代码语言：javascript复制

var data = {
	paging: {
	currentPage: 1,
	pageSizes: [15, 30, 45, 60],
	pageSize: 15,
	total: 1500,
	},
};

var vm = new Vue({
	el: "cont",
	data: data,
	methods: {
		handleSizeChange(val) {
			this.addPaging.pageSize = val;
			console.log('每页'   val   '条,'   this.addPaging.pageSize);
		},
		handleCurrentChange(val) {
			console.log('当前页:'   val   ','   this.addPaging.currentPage);
		},
	}
});

Attributes

参数	说明	类型	可选值	默认值
small	是否使用小型分页样式	boolean	—	false
background	是否为分页按钮添加背景色	boolean	—	false
page-size	每页显示条目个数，支持 .sync 修饰符	number	—	10
total	总条目数	number	—	—
page-count	总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性	Number	—	—
pager-count	页码按钮的数量，当总页数超过该值时会折叠	number	大于等于 5 且小于等于 21 的奇数	7
current-page	当前页数，支持 .sync 修饰符	number	—	1
layout	组件布局，子组件名用逗号分隔	String	sizes, prev, pager, next, jumper, ->, total, slot	‘prev, pager, next, jumper, ->, total’
page-sizes	每页显示个数选择器的选项设置	number[]	—	[10, 20, 30, 40, 50, 100]
popper-class	每页显示个数选择器的下拉框类名	string	—	—
prev-text	替代图标显示的上一页文字	string	—	—
next-text	替代图标显示的下一页文字	string	—	—
disabled	是否禁用	boolean	—	false

Events

事件名称	说明	回调参数
size-change	pageSize 改变时会触发	每页条数
current-change	currentPage 改变时会触发	当前页
prev-click	用户点击上一页按钮改变当前页后触发	当前页
next-click	用户点击下一页按钮改变当前页后触发	当前页

参考：

https://cloud.tencent.com/developer/section/1489889

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/187140.html原文链接：https://javaforall.cn

https 网络安全 编程算法 数据结构 jquery

0 人点赞