|
|
<!--
|
|
|
* @Descripttion:
|
|
|
* @version:
|
|
|
* @Author: JC9527
|
|
|
* @Date: 2023-09-04 13:11:33
|
|
|
* @LastEditors: laozt 2721205210@qq.com
|
|
|
* @LastEditTime: 2023-12-19 09:51:36
|
|
|
-->
|
|
|
<template>
|
|
|
<div class="pagination">
|
|
|
<slot></slot>
|
|
|
<div class="right">
|
|
|
<span class="custom"
|
|
|
>共{{ total }}条，显示{{
|
|
|
total == 0
|
|
|
? "0"
|
|
|
: pageNum == 1
|
|
|
? "1"
|
|
|
: pageSize * (pageNum - 1) + 1
|
|
|
}}-{{ numberMap() }}条</span
|
|
|
>
|
|
|
<el-pagination
|
|
|
background
|
|
|
:small="true"
|
|
|
:total="total"
|
|
|
layout=" prev, pager, next, sizes, jumper"
|
|
|
@current-change="currentChange"
|
|
|
@size-change="sizeChange"
|
|
|
:current-page.sync="pageNum"
|
|
|
:page-size.sync="pageSize"
|
|
|
>
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
pageNum:1,
|
|
|
pageSize:10,
|
|
|
}
|
|
|
},
|
|
|
props:{
|
|
|
total:{
|
|
|
type:Number,
|
|
|
required:true
|
|
|
},
|
|
|
},
|
|
|
methods:{
|
|
|
currentChange(e) {
|
|
|
this.pageNum = e;
|
|
|
this.$emit('pagesChange',{pageSize:this.pageSize,pageNum:e})
|
|
|
},
|
|
|
// 每页显示数改变
|
|
|
sizeChange(e) {
|
|
|
this.pageSize = e;
|
|
|
this.pageNum = 1;
|
|
|
this.$emit('pagesChange',{pageSize:e,pageNum:this.pageNum})
|
|
|
},
|
|
|
// 回到默认页码
|
|
|
defaultPages(){
|
|
|
this.pageSize = 10;
|
|
|
this.pageNum = 1;
|
|
|
},
|
|
|
//算数
|
|
|
numberMap() {
|
|
|
// if (this.total == this.tableData.length) {
|
|
|
// return this.total;
|
|
|
// } else
|
|
|
if (
|
|
|
this.total >
|
|
|
this.pageNum * this.pageSize
|
|
|
) {
|
|
|
return this.pageNum * this.pageSize;
|
|
|
} else if (
|
|
|
this.total < this.pageNum * this.pageSize ||
|
|
|
this.total == this.pageNum * this.pageSize
|
|
|
) {
|
|
|
return this.total;
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
mounted() {
|
|
|
document.getElementsByClassName(
|
|
|
"el-pagination__jump"
|
|
|
)[0].childNodes[0].nodeValue = "跳至";
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.pagination {
|
|
|
// margin-top: vh(20);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
.right {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
// padding-bottom: vh(20);
|
|
|
::v-deep .el-pagination__jump {
|
|
|
margin: 0;
|
|
|
}
|
|
|
::v-deep .el-input--mini .el-input__inner {
|
|
|
height: 23px;
|
|
|
line-height: 23px;
|
|
|
}
|
|
|
::v-deep .el-input--mini .el-input__icon {
|
|
|
line-height: 23px;
|
|
|
}
|
|
|
.custom {
|
|
|
font-size: 12px;
|
|
|
font-family: Alibaba PuHuiTi;
|
|
|
font-weight: 400;
|
|
|
color: #525966;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
