turnPage.vue
<template>
<div>
<el-pagination background :current-page="currentPage" :total="total" :disabled="disabled" layout="prev, next" prev-text="上一页" next-text="下一页" @prev-click="prevClick" @next-click="nextClick">
</el-pagination>
</div>
</template>
<script>
export default {
props: {
currentPage: {
type: Number,
default: 1
},
total: {
type: Number,
default: 0
},
disabled: {
type: Boolean,
default: () => []
}
},
methods: {
prevClick (val) {
this.$emit('prevClick', val)
},
nextClick (val) {
this.$emit('nextClick', val)
}
}
}
</script>
<style lang="stylus" scoped>
/deep/ .el-pagination
text-align right
margin-top 10px
/deep/ .el-pagination.is-background .btn-next, /deep/ .el-pagination.is-background .btn-prev
background-color #409EFF
color #FFF
width 68px
height 28px
/deep/ .el-pagination.is-background .btn-next span, /deep/ .el-pagination.is-background .btn-prev span
font-size 12px
/deep/ .el-pagination.is-background .btn-next:disabled, /deep/ .el-pagination.is-background .btn-prev:disabled, /deep/ .el-pagination.is-background .el-pager li.disabled
background-color #C0C4CC
</style>
使用组件
<template>
<turn-page :currentPage="currentPage" :total="total" :disabled="disabled" @prevClick="prevClick" @nextClick="nextClick"></turn-page>
</template>
<script>
import turnPage from '@/commonComponents/turnPage'
export default {
components: {
turnPage,
},
data() {
return {
total: 0,
currentPage: null
}
},
created() {
this.refresh()
},
methods: {
refresh (data, dir) {
if (!dir) {
this.currentPage = 1
this.total = res.result.total
}
},
prevClick (val) {
this.currentPage = val
let data = {
startNo: this.startNo,
endNo: this.endNo,
pageUpDown: -10
}
this.refresh(data, 'prev')
},
nextClick (val) {
this.currentPage = val
let data = {
startNo: this.startNo,
endNo: this.endNo,
pageUpDown: 10
}
this.refresh(data, 'next')
}
}
</script>