element ui 上一页下一页_vue翻页器，包括上一页，下一页，跳转

翻页组件 -- 子组件

上一页

{{i}}

{{i}}

{{i}}

…

…

…

…

下一页

跳转到：

GO

export default {

model: { // 通过v-model传过来的参数

prop: 'pageNo',

event: 'jumpPage'

},

props: {

pageSize: {

type: Number,

default: 1

},

pageNo: { // 通过v-model传过来的参数

type: Number,

default: 1

}

},

data () {

return {

jumpPage: '' // 避免操作props参数

}

},

computed: {

prevDisable: function () { // “上一页”按钮是否可点

if (this.pageNo > 1) {

return false

} else {

return true

}

},

nextDisable: function () { // “下一页”按钮是否可点

if (this.pageNo < this.pageSize && this.pageSize > 1) {

return false

} else {

return true

}

}

},

methods: {

jumpPrev: function () { // 点击上一页

if (this.pageNo === 1) {

return false

} else {

this.$emit('jumpPage', this.pageNo - 1)

}

},

jumpNext: function () { // 点击下一页

if (this.pageNo === this.pageSize) {

return false

} else {

this.$emit('jumpPage', this.pageNo + 1) // 修改当前页码

}

},

jump: function (id) { // 直接跳转

if (id > this.pageSize) {

id = this.pageSize

}

this.jumpPage = ''

this.$emit('jumpPage', id) // 修改当前页码

},

Go: function () {

if (this.jumpPage === '') { // 判空处理

return false

} else if (/^\d*$/.test(parseInt(this.jumpPage))) { // 填写数字才能跳转

this.jump(parseInt(this.jumpPage))

this.jumpPage = ''

} else {

this.jumpPage = ''

return false

}

}

}

}

@import "~styles/varibles.styl"

.pager-wrapper

float right

display flex

flex-direction row

height 38px

.pager-box

margin-top -15px

a,span

display inline-block

width 38px

height 38px

margin 0 2px

border 1px solid #E5E5E5

color #bdbdbd

text-align center

font 14px/38px ""

em

color $bgColor

.pager-prev,.pager-next

width 78px

.pager-input

display flex

flex-direction row

height 38px

margin-left 20px

font 14px/40px ""

color #bdbdbd

input,.pager-btn-go

display inline-block

width 40px

height 40px

border 1px solid #E5E5E5

box-sizing content-box

outline none

text-align center

父组件

//组件引入

import pager from '../../component/pager/pager.vue'

//组件调用声明

components:{ pager}

//参数

data () {

return {

pageSize: 30, //总页数 -- 后台传值

pageNo: 2　　//当前页

}

}

//接收跳转事件

methods:{

jump (id) {

console.log(id)

}

}