93 lines
2.0 KiB
Vue
93 lines
2.0 KiB
Vue
<!--
|
|
* @name: 自定义分页组件
|
|
* @author: Zhangpengcheng
|
|
* @date: 2022-09-05
|
|
-->
|
|
<template>
|
|
<div class="pageTion" flex="main:right">
|
|
<el-pagination ref="pagination" :page-sizes="[10,20, 30, 40,100]" :total="pageModel.total"
|
|
:current-page="pageModel.pageIndex"
|
|
:page-size="pageModel.pageSize"
|
|
@current-change="currentChange" @size-change="sizeChange" background
|
|
layout="prev, pager, next,jumper,total,sizes"
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
pageModel: {
|
|
default: null
|
|
}
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
created() {
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
})
|
|
},
|
|
computed: {},
|
|
methods: {
|
|
sizeChange(val) {
|
|
let pageModel = this.pageModel
|
|
pageModel.pageSize = val
|
|
pageModel.limit = val
|
|
this.$emit('update:pageModel', pageModel)
|
|
this.$emit('onPageChange')
|
|
},
|
|
currentChange(val) {
|
|
let pageModel = this.pageModel
|
|
pageModel.pageIndex = val
|
|
pageModel.page = val
|
|
this.$emit('update:pageModel', pageModel)
|
|
this.$emit('onPageChange')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.pageTion {
|
|
width: 100%;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
::v-deep .el-pager li {
|
|
background-color: #f9f9f9 !important;
|
|
width: 36px !important;
|
|
height: 36px !important;
|
|
line-height: 36px !important;
|
|
border-radius: 50% !important;
|
|
}
|
|
|
|
::v-deep .el-pager .active {
|
|
background-color: #409EFF !important;
|
|
}
|
|
|
|
::v-deep .el-pagination button {
|
|
background-color: #f9f9f9 !important;
|
|
color: #333333 !important;
|
|
font-size: 14px !important;
|
|
border-radius: 18px !important;
|
|
width: 98px !important;
|
|
height: 36px !important;
|
|
}
|
|
|
|
::v-deep .el-pagination__total {
|
|
line-height: 36px !important;
|
|
}
|
|
|
|
::v-deep .el-pagination__jump {
|
|
height: 36px !important;
|
|
line-height: 36px !important;
|
|
}
|
|
|
|
::v-deep .el-input__inner {
|
|
height: 36px !important;
|
|
line-height: 36px !important;
|
|
}
|
|
</style>
|