效果图
一页想多少条,pageSize可随意自定义编辑, 然后按下回车键确认!!!
第一步
在src > compoments > 写一个组件
代码如下
<template>
<!-- 全局分页功能 -->
<div class="content">
<el-pagination
:total="total"
:current-page="currentPage"
:page-size="pageSize"
background
small
layout="prev, pager, next, jumper"
@current-change="handleCurrentChange"
/>
<div class="edit">
<el-input v-model="pageSizes" placeholder="条数/页" @keyup.enter.native="editPageSizes"/>
</div>
<div class="total-box">
共 {{total}} 条
</div>
</div>
</template>
<script>
export default {
name: 'PaginationPaging',
props: {
total: {
type: Number, // 总条数
default: 0
},
currentPage: {
type: Number, // 当前页
default: 1
},
pageSize: {
type: Number, // 每页的条数
default: 20
}
},
data() {
return {
pageSizes: ''
}
},
methods: {
// 当前页事件
handleCurrentChange(val) {
this.$emit('currentChange', val)
},
// 用户自定义每页条数需要的触发事件
editPageSizes() {
this.$emit('editPagesizes', Number(this.pageSizes))
}
}
}
</script>
<style lang="scss" scoped>
.content {
display: flex;
justify-content: flex-end;
::v-deep.edit {
height: 30px;
width: 60px;
margin-top: 2px;
margin-left: 20px;
display: flex;
justify-content: space-around;
.el-input__inner {
height: 26px !important;
height: 30px;
width: 60px;
text-indent: 0em;
font-size: 12px;
padding: 0;
text-align: center;
}
.el-button {
height: 26px;
}
}
.total-box {
display: inline;
padding: 7px 7px 0;
}
}
</style>
第二步
在整个项目的main.js文件里面加上这两段代码
// 引入分页组件
import Pagination from '@/components/Pagination'
// 注册分页组件
Vue.component('pagination', Pagination)
第三步
在随便哪个 点vue 文件里面, 直接可以使用
<template>
<pagination
:total="pageTotal"
:current-page="pageNo"
:pageSize="pageSize"
size="pageSize"
@currentChange="handleCurrentChange"
@editPagesizes="editPageSizes"/>
</template>
<script>
export default {
data() {
return {
pageNo: 1,
pageSize: 20,
pageTotal: 0,
}
},
methods: {
// 修改当前页事件
handleCurrentChange(pageNo) {
this.pageNo = pageNo
console.log("我是第几页",this.pageNo);
},
// 修改分页的每页的条数
editPageSizes(val) {
this.pageSize = val
console.log("我是多少条",this.pageSize);
}
}
}
</script>
说明
在input里面输入想要的条数, 按下回车键, 可实现效果。也可以根据自己的需要,改成失焦触发事件。