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.
136 lines
2.5 KiB
136 lines
2.5 KiB
<template>
|
|
<div :class="{'hidden':hidden}" class="pagination-container e-pagination">
|
|
<el-pagination
|
|
:background="background"
|
|
:current-page.sync="current"
|
|
:page-size.sync="Size"
|
|
:layout="layout"
|
|
:page-sizes="pageSizes"
|
|
:total="total"
|
|
v-bind="$attrs"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
/**
|
|
* props 参数
|
|
* @total 默认数据总数
|
|
* @page 默认开始页面
|
|
* @limit 每页的数据条数
|
|
* @pageSizes 分组
|
|
* */
|
|
|
|
export default {
|
|
name: 'Pagination',
|
|
props: {
|
|
total: {
|
|
required: true,
|
|
type: Number
|
|
},
|
|
page: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
limit: {
|
|
type: Number,
|
|
default: 20
|
|
},
|
|
pageSizes: {
|
|
type: Array,
|
|
default() {
|
|
return [5, 10, 15, 20, 30, 50]
|
|
}
|
|
},
|
|
layout: {
|
|
type: String,
|
|
default: 'prev, pager, next, sizes, total, jumper'
|
|
},
|
|
background: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
autoScroll: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
hidden: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
/**
|
|
* page-size 每页显示条目个数，支持 .sync 修饰符
|
|
* current-page 当前页数，支持 .sync 修饰符
|
|
* */
|
|
computed: {
|
|
current: {
|
|
get() {
|
|
return this.page
|
|
},
|
|
set(val) {
|
|
this.$emit('update:page', val)
|
|
}
|
|
},
|
|
Size: {
|
|
get() {
|
|
return this.limit
|
|
},
|
|
set(val) {
|
|
this.$emit('update:limit', val)
|
|
}
|
|
}
|
|
},
|
|
/**
|
|
* pagination 父定义请求函数 getList
|
|
* */
|
|
methods: {
|
|
handleSizeChange(val) {
|
|
this.$emit('pagination', { pageNum: this.curren, pageSize: val })
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.$emit('pagination', { pageNum: val, pageSize: this.Size })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.pagination-container.pagesize{
|
|
float: right;
|
|
padding: 0;
|
|
}
|
|
.pagination-container {
|
|
background: #fff;
|
|
padding: 16px 16px 0 16px;
|
|
float: right;
|
|
}
|
|
.pagination-container.hidden {
|
|
display: none;
|
|
}
|
|
.el-pagination {
|
|
white-space: nowrap;
|
|
color: #303133;
|
|
font-weight: bold;
|
|
height: 28px;
|
|
}
|
|
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev{
|
|
padding: 0 20px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 2px;
|
|
background-color: #FFFFFF;
|
|
}
|
|
.e-pagination{
|
|
.el-icon-arrow-left:before,
|
|
.el-icon-arrow-right:before{
|
|
content: '下一页';
|
|
color: #727272;
|
|
}
|
|
.el-icon-arrow-left:before{
|
|
content: '上一页';
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|