MybatisPlus 分页插件

前端代码

<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();
    }
}