Vue分页组件的封装方法

前言

这个是基于vue2的分页封装，仿照elementUI而写的组件。

效果如图

话不多说，直接上代码

<template>
? <div class="pagination">
? ? <!-- 总页数 -->
? ? <div class="total">共{{ total }}条</div>
? ? <!-- 选择每页的条数 -->
? ? <select name="" id="size_select" v-model="sizes" @change="sizeChange">
? ? ? <option v-for="item in pageSizes" :key="item" :value="item">
? ? ? ? {{ item }}条/页
? ? ? </option>
? ? </select>
? ? <div class="pagenum">
? ? ? <!-- 上一页 -->
? ? ? <el-button
? ? ? ? icon="el-icon-arrow-left"
? ? ? ? :disabled="backDisabled"
? ? ? ? circle
? ? ? ? @click="back"
? ? ? ></el-button>
? ? ? <!-- 页码 -->
? ? ? <ul>
? ? ? ? <li
? ? ? ? ? :class="currentPage == item ? 'active' : ''"
? ? ? ? ? v-for="(item, index) in pagenum"
? ? ? ? ? :key="index"
? ? ? ? ? @click="toPage(item)"
? ? ? ? >
? ? ? ? ? {{ item }}
? ? ? ? </li>
? ? ? </ul>
? ? ? <!-- 下一页 -->
? ? ? <el-button
? ? ? ? icon="el-icon-arrow-right"
? ? ? ? :disabled="forwardDisabled"
? ? ? ? circle
? ? ? ? @click="forward"
? ? ? ></el-button>
? ? </div>
? </div>
</template>
?
<script>
export default {
? name: "pagination",
? props: {
? ? total: { ?// 总数
? ? ? type: null,
? ? ? required: true,
? ? },
? ? pageSizes: { // 可选择的每页条数
? ? ? type: Array,
? ? },
? ? pageSize: { ?// 每页显示的条数
? ? ? type: Number,
? ? ? required: true,
? ? },
? ? currentPage: { // 当前页
? ? ? type: Number,
? ? ? required: true,
? ? },
? },
? data() {
? ? return {
? ? ? sizes: this.pageSize, ?// 接收props传来的pageSize
? ? ? nowPage: this.currentPage, ?// 接收props传来的currentPage
? ? };
? },
? computed: {
? ? allPage() { ?// 计算所有的页数
? ? ? return Math.ceil(this.total / this.pageSize);
? ? },
? ? backDisabled() { ?// 是否禁用上一页
? ? ? return this.currentPage == 1;
? ? },
? ? forwardDisabled() { // 是否禁用下一页
? ? ? return this.currentPage == this.allPage;
? ? },
? ? pagenum() { ? // 计算显示不同的页
? ? ? if (this.allPage - this.nowPage > 6) { ?// ?
? ? ? ? if (this.nowPage > 6) {
? ? ? ? ? return [
? ? ? ? ? ? 1,
? ? ? ? ? ? "...",
? ? ? ? ? ? this.nowPage - 2,
? ? ? ? ? ? this.nowPage - 1,
? ? ? ? ? ? this.nowPage,
? ? ? ? ? ? this.nowPage + 1,
? ? ? ? ? ? this.nowPage + 2,
? ? ? ? ? ? "...",
? ? ? ? ? ? this.allPage,
? ? ? ? ? ];
? ? ? ? } else {
? ? ? ? ? if (this.allPage > 8) {
? ? ? ? ? ? return [1, 2, 3, 4, 5, 6, "...", this.allPage];
? ? ? ? ? } else {
? ? ? ? ? ? return this.allPage;
? ? ? ? ? }
? ? ? ? }
? ? ? } else {
? ? ? ? if (this.nowPage < 6) {
? ? ? ? ? return this.allPage;
? ? ? ? } else {
? ? ? ? ? return [
? ? ? ? ? ? 1,
? ? ? ? ? ? "...",
? ? ? ? ? ? this.allPage - 5,
? ? ? ? ? ? this.allPage - 4,
? ? ? ? ? ? this.allPage - 3,
? ? ? ? ? ? this.allPage - 2,
? ? ? ? ? ? this.allPage - 1,
? ? ? ? ? ? this.allPage,
? ? ? ? ? ];
? ? ? ? }
? ? ? }
? ? },
? },
? methods: {
? ? sizeChange() { ?// 每页限制条数改变触发事件
? ? ? this.$emit("sizeChange", this.sizes);
? ? },
? ? forward() { ?// 点击下一页
? ? ? this.$emit("currentChange", (this.nowPage += 1));
? ? },
? ? back() { ?// 点击上一页
? ? ? this.$emit("currentChange", (this.nowPage -= 1));
? ? },
? ? toPage(val) { ?// 点击页数
? ? ? if (val == "...") {
? ? ? ? console.log(2);
? ? ? } else {
? ? ? ? this.nowPage = val;
? ? ? ? this.$emit("currentChange", val);
? ? ? }
? ? },
? },
};
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于Vue分页组件的封装方法的详细内容...