Pagination 分页,当数据量过多时,使用分页分解数据。
element-ui地址: https://element.eleme.cn/#/zh-CN/component/pagination
1. 在页面中直接使用el-pagination
<template>
<div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="start"
:page-sizes="[10, 20, 50, 100]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
start: 1, //当前开始页
pagesize: 10, // 每页数
total: 0,
}
},
methods:{
//模拟对应的请求列表数据的方法
async init() {
let res = await logList({
start: this.start,
pageSize: this.pagesize,
ip: this.formInline.ip, // ip地址
loginName: this.formInline.loginName, //登录名字
beginTime:this.formInline.startDate,
endTime: this.formInline.endDate,
});
if (res.code == 200) {
this.tableData = res.data.list;
this.total = res.data.total;
}
},
// 分页事件
handleSizeChange(val) {
this.pagesize = parseInt(`${val}`);
this.init(); //改变后再次调用列表接口
},
// 分页事件
handleCurrentChange(val) {
this.start = parseInt(`${val}`);
this.init(); //改变后再次调用列表接口
},
}
}
</script>
2. 组件化封装el-pagination
2.1 在src下的components文件夹下创建Pagination文件夹,在其中创建index.vue文件。
index.vue
<template>
<div :class="{'hidden':hidden}" class="pagination-container">
<el-pagination
:background="background"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:layout="layout"
:page-sizes="pageSizes"
:total="total"
v-bind="$attrs"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
// import { scrollTo } from '@/utils/scroll-to'
export default {
name: 'Pagination',
props: {
total: { // 总页数 注这里 设置的是type为Number 使用页面初始化时候要是设置了null就报错了
required: true,
type: Number
},
page: { // 当前页数
type: Number,
default: 1
},
limit: { // 每页数
type: Number,
default: 20
},
pageSizes: { // 每页显示个数选择器的选项设置
type: Array,
default() {
return [10, 20, 50, 100]
}
},
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper'
},
background: { //设置background属性可以为分页按钮添加背景色。
type: Boolean,
default: false
},
autoScroll: {
type: Boolean,
default: true
},
hidden: {
type: Boolean,
default: false
}
},
computed: {
currentPage: {
get() {
return this.page
},
set(val) {
this.$emit('update:page', val)
}
},
pageSize: {
get() {
return this.limit
},
set(val) {
this.$emit('update:limit', val)
}
}
},
methods: {
handleSizeChange(val) {
this.$emit('pagination', { page: this.currentPage, limit: val })
// if (this.autoScroll) {
// scrollTo(0, 800)
// }
},
handleCurrentChange(val) {
this.$emit('pagination', { page: val, limit: this.pageSize })
// if (this.autoScroll) {
// scrollTo(0, 800)
// }
}
}
}
</script>
<style scoped>
.pagination-container {
/* background: #fff;
padding: 32px 16px; */
}
.pagination-container.hidden {
display: none;
}
</style>
2.2 在对应组件调用
这里用到了.sync 没用使用 自定义事件
<template>
<div>
<Pagination :total="total" :page.sync="page" :limit.sync="limit" @pagination="init" />
</div>
</template>
<script>
import Pagination from '@/components/Pagination'
export default {
components:{
Pagination
},
data() {
return {
page: 1, //当前开始页
limit: 10, // 每页数
total: 0,
}
},
methods: {
// 初始化事件
async init() {
let res = await playList({
start: this.page,
pageSize: this.limit,
terminalId: this.formInline.num,
playContent: this.formInline.task,
categorize: 2,
shopName: this.formInline.shopName,//店铺名称
});
if (res.code == 200) {
this.tableData = res.data.list;
this.total = res.data.total;
}
},
}
}
<script>