component下封装公共子组件
<template>
<div :class="{ hidden: hidden }" class="pagination-container">
<el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="pageSize" :layout="layout"
:page-sizes="pageSizes" :total="total" v-bind="$attrs" @size-change="handleSizeChange"
@current-change="handleCurrentChange" />
</div>
</template>
<script>
import { scrollTo } from "@/utils/scroll-to";
export default {
name: "Pagination",
props: {
total: {
required: true,
type: Number,
},
page: {
type: Number,
default: 1, // 默认第一页
},
limit: {
type: Number,
default: 5, // 默认每页5条
},
pageSizes: {
type: Array,
default() {
return [5, 10, 15, 20]; //默认显示可选的每页多少条数据
},
},
layout: {
type: String,
default: "total, sizes, prev, pager, next, jumper",
},
background: {
type: Boolean,
default: true,
},
autoScroll: {
type: Boolean,
default: true,
},
hidden: {
type: Boolean,
default: false,
},
},
// 在定义2个计算属性 一个为当前页多少条数据,一个为第几页,因为会改变这2个值 所以设置了set属性
computed: {
currentPage: {
get() {
return this.page;
},
set(val) {
// console.log("currentPage", val);
this.$emit("update:page", val); // 改变的第几页的值赋值给父组件
},
},
pageSize: {
get() {
return this.limit;
},
set(val) {
// console.log("pageSize", val);
this.$emit("update:limit", val); // 改变的当前页几条数据的值赋值给父组件
},
},
},
// 在定义2个方法 一个改变页数,一个当前页多少条数据
methods: {
handleSizeChange(val) {
this.$emit("pagination", { page: this.currentPage, limit: val });
// if (this.autoScroll) {
// scrollTo(0, 800);
// }
},
handleCurrentChange(val) {
this.$emit("pagination", { page: val, limit: this.pageSize });
// if (this.autoScroll) {
// scrollTo(0, 800);
// }
},
},
};
</script>
<style scoped>
.pagination-container {
background: #fff;
padding: 32px 16px;
}
.pagination-container.hidden {
display: none;
}
</style>
在父组件中使用
<template>
<div>
<!-- 分页子组件 -->
<pagination
v-show="total > 1"
:total="total"
:page.sync="searchQuery.current"
:limit.sync="searchQuery.size"
@pagination="getDateList"
/>
</div>
</template>
<script>
import Pagination from "@/components/Pagination/index"; // 分页
export default {
components: {
Pagination
},
data() {
return {
searchQuery: {
//xxx其他参数
current: 1,
size: 10
},
total: 0,
}
},
methods: {
getDateList(){}
}
}
</script>
<style lang="less" scoped>
</style>