- it技术
- pagination
<template
>
<div
class="pagination-container">
<el
-pagination
:current
-page
.sync
="currentPage" :page
-size
.sync
="pageSize" :layout
="layout" :page
-sizes
="pageSizes" :total
="total" v
-bind
="$attrs" @size
-change
="handleSizeChange" @current
-change
="handleCurrentChange"/>
</div
>
</template
>
<script
>
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 [this.limit
, 50, 100, 300, 500, 700, 1000]
}
},
layout
: {
type
: String
,
default () {
return 'total, prev, pager,next, jumper'
}
}
},
data () {
return {
}
},
computed
: {
currentPage
: {
get () {
return this.page
},
set (val
) {
this.$emit('update:page', val
)
}
},
pageSize
: {
get () {
return this.limit
},
set (val
) {
this.$emit('update:limit', val
)
}
}
},
methods
: {
handleSizeChange (val
) {
console
.log(val
)
console
.log(this.currentPage
)
this.$emit('pagination', { page
: this.currentPage
, limit
: val
})
},
handleCurrentChange (val
) {
this.$emit('pagination', { page
: val
, limit
: this.pageSize
})
}
}
}
</script
>
<style scoped
>
.pagination
-container
{
background
: #fff
;
padding
: 20px
0 10px
;text
-align
: right
;
}
</style
>
<pagination v
-show
="totalPage>0" :total
="totalPage" :page
.sync
="limit.page" :limit
.sync
="limit.pageSize" :layout
="layout" @pagination
="getTableData" />
totalPage
: 0,
limit
:{
page
:1,
pageSize
:10
},
tableData
: [],
layout
: 'total, prev, pager,next, sizes, jumper',
