|
Vue开发之封装分页组件与使用示例
这篇文章主要介绍了Vue开发之封装分页组件与使用,结合实例形式分析了vue.js封装分页组件操作以及使用组件进行分页的相关实现技巧,需要的朋友可以参考下
本文实例讲述了Vue开发之封装分页组件与使用。分享给大家供大家参考，具体如下： 使用elementui中的el-pagination来封装分页组件 pagination.vue:
template
div
el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="page.page" :page-sizes="pageSizes" :page-size="page.limit"
layout="total, sizes, prev, pager, next, jumper" :total="total"
/el-pagination
/div
/template
script
export default {
pro凡科抠图: {
total: {
type: Number
} // 总条数
data() {
return {
pageSizes: [10, 20, 50, 100],
page: {
page: 1,
limit: 10
methods: {
// 每页条数变更
handleSizeChange(val) {
this.page.limit = val;
this.$emit('pageChange', this.page);
// 当前页码变更
handleCurrentChange(val) {
this.page.page = val;
this.$emit('pageChange', this.page);
/script
style
.pagination {
margin: 20px 0;
/style
使用创建的分页组件 pagination :total="total" @pageChange="pageChange" /pagination (责任编辑：admin) |