最近重构一个项目,需要实现带有首页,末页的分页功能,
但是element的pagination并没有这样子,最完整功能如下
网上搜索了好多,发现有slot可以增加自定义项,但是
<el-pagination
background
@current-change="handleCurrentChange"
:current-page="currentPageNum"
:page-size="pageSize"
layout="total,slot,prev,pager,next,slot, jumper"
:total="total"
:firstPage='firstPage'
:lastPage='lastPage'
>
<el-button
:disabled="currentPageNum === firstPage"
class="first-pager"
@click="toFirstPage"
>首页</el-button>
<el-button
:disabled="currentPageNum === lastPage"
class="last-pager"
@click="toLastPage"
>末页</el-button>
</el-pagination>
这样却并不能实现,只能出现一个首页的button,实在是找不到末页的button哪里去了,不知道是不是只能带一个slot
最后无奈只能这样实现了,直接上代码了
<template>
<div>
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPageNum"
:page-size="pageSize"
:page-sizes="pageSizes"
layout="total,sizes,slot,prev"
:total="total"
>
<el-button :disabled="firstPageBtnDisabled" class="first-pager" @click="toFirstPage">首页</el-button>
</el-pagination>
<el-pagination
background
@current-change="handleCurrentChange"
:current-page="currentPageNum"
:page-size="pageSize"
layout="pager,next,slot,jumper"
:total="total"
>
<el-button :disabled="lastPageBtnDisabled" class="last-pager" @click="toLastPage">末页</el-button>
</el-pagination>
</div>
</template>
<script>
export default {
name: 'pages',
components: {},
data() {
return {
currentPageNum: this.currentPage,
firstPageBtnDisabled: true,
lastPageBtnDisabled: false,
lastPageNum: Math.ceil(this.total / this.pageSize)
}
},
props: {
currentPage: {
type: Number,
default: 1
},
pageSize: {
type: Number,
default: 10
},
pageSizes: {
type: Array,
default: function() {
return [10, 20, 50, 100]
}
},
total: {
type: Number,
default: 0
}
},
watch: {
total(newVal, oldVal) {
this.total = newVal
this.lastPageNum = Math.ceil(newVal / this.pageSize)
}
},
created() {},
methods: {
handleSizeChange(val) {
this.$emit('handleSizeChange', val)
},
handleCurrentChange(val) {
this.firstPageBtnDisabled = val === 1 ? true : false
this.lastPageBtnDisabled = val === this.lastPageNum ? true : false
this.currentPageNum = val
this.$emit('handleCurrentChangeSub', val)
},
toFirstPage(val) {
this.handleCurrentChange()
},
toLastPage(val) {
this.currentPageNum = this.lastPageNum
this.handleCurrentChange(this.lastPageNum)
}
},
created() {},
mounted() {},
destroyed() {}
}
</script>
<style>
.el-pagination {
float: left;
}
</style>
全局注册一下组件,在compones文件夹下新建index.js
import Vue from 'vue'
import pages from './pages'
Vue.component('pages', pages)
最后在main.js中引入就可以了
在组件中使用
<pages
:total='fenye.total'
:currentPage='fenye.pageNum'
:pageSize='fenye.pageSize'
@handleSizeChange="handleSizeChange" @handleCurrentChangeSub="handleCurrentChange"
></pages>
或有不足之处尚待修改