vue 分页 Pagination

全栈程序员站长

发布于 2022-11-10 09:59:25

4840

发布于 2022-11-10 09:59:25

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

<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>

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	用户点击下一页按钮改变当前页后触发	当前页