Vue分页组件如何封装

今天小编给大家分享一下Vue分页组件如何封装的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

效果如图

话不多说，直接上代码

<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分页组件如何封装”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。