前端代码
<template>
<div>
<!-- 分页start -->
<el-dialog
:visible.sync="dialogPageviewsVisible"
title="Reading statistics"
>
<el-table
:data="pageviewsData"
border
fit
highlight-current-row
style="width: 100%"
>
<el-table-column prop="key" label="Channel" />
<el-table-column prop="pageviews" label="Pageviews" />
</el-table>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogPageviewsVisible = false">
{{ $t("table.confirm") }}
</el-button>
</span>
</el-dialog>
<pagination
v-show="total > 0"
:total="total"
:page.sync="listQuery.page"
:limit.sync="listQuery.limit"
@pagination="getList"
/>
<!-- 分页end -->
</div>
</template>
<script lang="ts">
export default class extends Vue {
private pageviewsData = []; //分页
private dialogPageviewsVisible = false; //分页
private total = 0;
private listQuery = {
id: null,
page: 1,
limit: 10,
importance: undefined,
title: undefined,
type: undefined,
sort: "+id"
};
}
</script>
/components/Pagination/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 lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { scrollTo } from "@/utils/scroll-to";
@Component({
name: "Pagination"
})
export default class extends Vue {
@Prop({ required: true }) private total!: number;
@Prop({ default: 1 }) private page!: number;
@Prop({ default: 20 }) private limit!: number;
@Prop({ default: () => [10, 20, 30, 50] }) private pageSizes!: number[];
@Prop({ default: "total, sizes, prev, pager, next, jumper" })
private layout!: string;
@Prop({ default: true }) private background!: boolean;
@Prop({ default: true }) private autoScroll!: boolean;
@Prop({ default: false }) private hidden!: boolean;
get currentPage() {
return this.page;
}
set currentPage(value) {
this.$emit("update:page", value);
}
get pageSize() {
return this.limit;
}
set pageSize(value) {
this.$emit("update:limit", value);
}
handleSizeChange(value: number) {
this.$emit("pagination", { page: this.currentPage, limit: value });
if (this.autoScroll) {
scrollTo(0, 800);
}
}
handleCurrentChange(value: number) {
this.$emit("pagination", { page: value, limit: this.pageSize });
if (this.autoScroll) {
scrollTo(0, 800);
}
}
}
</script>
<style lang="scss" scoped>
.pagination-container {
background: #fff;
padding: 32px 16px;
}
.pagination-container.hidden {
display: none;
}
</style>
后端代码
/**
* 分页插件
* @param <T>
*/
@Data
@Accessors(chain = true)
@EqualsAndHashCode(callSuper = true)
public class PageEntity<T> extends Page<T> {
public PageEntity(long current, long size) {
super(current, size);
}
public PageEntity(String current, String size) {
super(Long.parseLong(current), Long.parseLong(size));
}
}
@Configuration
@EnableTransactionManagement
public class MybatisPlusConfig {
/**
* 分页插件
*/
@Bean
public PaginationInterceptor paginationInterceptor() {
return new PaginationInterceptor();
}
}