You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
2.6 KiB
122 lines
2.6 KiB
<!-- 分页组件 -->
|
|
<template>
|
|
<div class>
|
|
<el-empty v-if="!total&&emptyShow" description="暂无数据"></el-empty>
|
|
<div class="page" :style="{'padding':`${padding} 0` }">
|
|
<el-pagination
|
|
background
|
|
layout="prev, pager, next"
|
|
:total="total"
|
|
:page-size="pageSize"
|
|
:current-page="currentPage"
|
|
@size-change="sizeChange"
|
|
@current-change="currentChange"
|
|
@prev-click="prevClick"
|
|
@next-click="nextClick"
|
|
:hide-on-single-page="total?false:true"
|
|
></el-pagination>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
//import引入的组件需要注入到对象中才能使用
|
|
components: {},
|
|
props: {
|
|
padding: {
|
|
type: Number,
|
|
default: () => 40
|
|
},
|
|
// 总条数
|
|
total: {
|
|
type: Number,
|
|
default: () => 0
|
|
},
|
|
// 每页多少条
|
|
pageSize: {
|
|
type: Number,
|
|
default: () => 9
|
|
},
|
|
// 当前在第几页
|
|
currentPage: {
|
|
type: Number,
|
|
default: () => 1
|
|
},
|
|
// 是否显示无数据图标
|
|
emptyShow: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
data() {
|
|
//这里存放数据
|
|
return {};
|
|
},
|
|
watch: {
|
|
total(val, vala) {
|
|
console.log(val, vala, "----");
|
|
}
|
|
},
|
|
//监听属性 类似于data概念
|
|
computed: {},
|
|
//监控data中的数据变化
|
|
watch: {},
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
created() {},
|
|
//方法集合
|
|
methods: {
|
|
// 每页条数发生变化
|
|
sizeChange(e) {
|
|
console.log(e, "每页条数发生变化");
|
|
},
|
|
// 页数改变时
|
|
currentChange(e) {
|
|
this.$emit("currentChange", e);
|
|
console.log(e, "页数发生变化");
|
|
},
|
|
// 点击上一页
|
|
prevClick(e) {
|
|
console.log(e, "点击上一页");
|
|
this.$emit("prevClick", e);
|
|
},
|
|
// 点击下一页
|
|
nextClick(e) {
|
|
console.log(e, "点击下一页");
|
|
this.$emit("nextClick", e);
|
|
}
|
|
},
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
mounted() {}
|
|
};
|
|
</script>
|
|
<style>
|
|
.el-pagination.is-background .el-pager li:not(.disabled):hover {
|
|
color: var(--themeColor);
|
|
}
|
|
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
|
background-color: #fff;
|
|
color: var(--themeColor);
|
|
|
|
border: 1px solid #dddddd;
|
|
|
|
border-radius: 6px;
|
|
}
|
|
.el-pagination.is-background .btn-next,
|
|
.el-pagination.is-background .btn-prev,
|
|
.el-pagination.is-background .el-pager li {
|
|
border: 1px solid #dddddd;
|
|
|
|
border-radius: 6px;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.el-pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.page {
|
|
padding: 50px 0;
|
|
}
|
|
</style>
|
|
|