80 lines
1.9 KiB
Vue
80 lines
1.9 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="10"
|
||
|
|
@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;
|
||
|
|
this.$emit('update:pageModel', pageModel)
|
||
|
|
this.$emit('onPageChange')
|
||
|
|
},
|
||
|
|
currentChange(val) {
|
||
|
|
let pageModel = this.pageModel;
|
||
|
|
pageModel.pageIndex = 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>
|