# Pagination.vue
src/components/Pagination.vue
<template>
<div class="mt-3">
<el-pagination
@size-change="handleSize"
@current-change="handleCurrent"
:current-page="page2"
:page-sizes="sizes"
:page-size="size2"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</template>
<script>
export default {
name: "index",
props: {
// 页数大小数组
sizes: {
type: Array,
default: function() {
return [10, 20, 50, 100, 200, 500];
}
},
// 分页显示多少条信息
size: {
type: Number,
default: function() {
return 10;
}
},
// 当前页
page: {
type: Number,
default: function() {
return 1;
}
},
// 总共多少条
total: {
type: Number,
default: function() {
return 0;
}
}
},
data() {
return {
size2: this.size,
page2: this.page
};
},
mounted() {},
methods: {
/**
* @description: 改变了分页大小
* @author: chenbz
* @date: 2021/4/25
*/
handleSize(size) {
this.page2 = 1;
this.size2 = size;
let data = {
page: this.page2,
size: size
};
this.$emit("handlePagination", data);
},
/***
* @description: 改变了分页页数
* @author: chenbz
* @date: 2021/4/25
*/
handleCurrent(current) {
this.page2 = current;
let data = {
page: current,
size: this.size2
};
this.$emit("handlePagination", data);
}
}
};
</script>
<style scoped></style>
# 页面引用
Test.vue
<template>
<div>
test
<MyPagination
:total="pagination.total"
@handlePagination="handlePagination"
>
</MyPagination>
</div>
</template>
<script>
// 引入封装分页组件
import MyPagination from "@/components/Pagination.vue";
export default {
name: "test",
components: {
MyPagination
},
data() {
return {
pagination: {
total: 500
}
};
},
mounted() {},
methods: {
// 改变了分页
handlePagination(val) {
console.log(val);
}
}
};
</script>
<style></style>
# 参数说明
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
sizes | 页数大小数组 | Array | [10, 20, 50, 100, 200, 500] |
size | 分页显示多少条信息 | Number | 10 |
page | 当前页 | Number | 1 |
total | 总共多少条 | Number | 0 |
# 方法
方法名 | 描述 | 回调函数 |
---|---|---|
@handlePagination | 改变了分页 | (Val) |