element封装上⼀页、下⼀页翻页组件
turnPage.vue
<template>
<div>
<el-pagination background:current-page="currentPage":total="total":disabled="disabled"layout="prev, next"prev-text="上⼀页"next-text="下⼀页"@pr ev-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-page r 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(){
},
methods:{
refresh(data, dir){
// 省略 axios 请求
if(!dir){
this.currentPage =1
}
},
prevClick(val){
this.currentPage = val
let data ={
startNo:this.startNo,
dNo,
vue element adminpageUpDown:-10
}
},
nextClick(val){
this.currentPage = val
let data ={
startNo:this.startNo,
dNo,
pageUpDown:10
}
}
}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。