组件封装(分页)
父组件
<template>
<div>
<hr />
<FenYe
:page.sync="page"
:limit.sync="limit"
:total.sync="total"
@getList="getList"
/>
</div>
</template>
<script>
import FenYe from "./FenYe.vue";
export default {
components: {
FenYe,
},
data() {
return {
page: 1,
limit: 20,
total: 40,
};
},
methods: {
getList() {},
},
};
</script>
子组件
<template>
<div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:page-sizes="pageSizes"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
/>
<span style="font-weight: normal; color: #606266"
>第 {{ currentPage }}/{{ Math.ceil(total / limit) }} 页</span
>
</div>
</template>
<script>
export default {
name: "FuZuJian",
props: {
page: {
default: 1,
type: Number,
},
limit: {
default: 5,
type: Number,
},
total: {
default: 20,
type: Number,
},
pageSizes: {
type: Array,
default() {
return [10, 20, 30];
},
},
},
computed: {
currentPage: {
get() {
return this.page;
},
set(val) {
console.log("currentPage", this.currentPage, val, 11111111111);
this.$emit("update:page", val);
},
},
pageSize: {
get() {
return this.limit;
},
set(val) {
this.$emit("update:limit", val);
},
},
},
methods: {
handleSizeChange(val) {
this.$emit("getList", { page: this.currentPage, limit: val });
},
handleCurrentChange(val) {
this.$emit("getList", { page: val, limit: this.pageSize });
},
},
};
</script>