Lexus-media/src/components/TablePage.vue

<template>
  <div class="table_page" v-show="totalPage > 0">
    <div class="fisrtPage" @click="jumpPage(1)" v-show="currentPage > 1">
      首页
    </div>
    <div class="previousPage" @click="jumpPage(2)" v-show="currentPage > 1">
      上一页
    </div>
    <div
      v-for="(item, index) in pageArr"
      :key="index"
      :class="{ current_page: currentPage == item }"
      @click="chagePage(item)"
    >
      {{ item }}
    </div>
    <div class="nextPage" @click="jumpPage(3)" v-show="currentPage < totalPage">
      下一页
    </div>
    <div class="lastPage" @click="jumpPage(4)" v-show="currentPage < totalPage">
      尾页
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 共有多少页
    totalPage: {
      type: Number,
      default: 0,
    },
    // 当前在第几页
    currentPage: {
      type: Number,
      default: 1,
    },
  },
  computed: {
    // 生成表格的导航
    pageArr() {
      let arr = [];
      if (this.totalPage <= 10) {
        // 最多展示十个，总页面小于等于10，全部展示
        for (let i = 1; i <= this.totalPage; i++) {
          arr.push(i);
        }
      } else {
        // 点击的是1~5， 展示1~10
        if (this.currentPage - 5 <= 0) {
          for (let i = 1; i <= 10; i++) {
            arr.push(i);
          }
        } else {
          // 点击 大于5，同时后面的页面至少有五个五个，展示
          if (this.totalPage - this.currentPage > 4) {
            for (let i = this.currentPage - 4; i <= this.currentPage + 5; i++) {
              arr.push(i);
            }
          } else {
            // 点击 大于五，同时后面的页面数不足五个
            for (let i = this.totalPage - 9; i <= this.totalPage; i++) {
              arr.push(i);
            }
          }
        }
      }
      return arr;
    },
  },
  methods: {
    chagePage: function (page) {
      this.$emit("change_page", page);
    },
    jumpPage: function (item) {
      this.$emit("jump_page", item);
    },
  },
};
</script>

<style scoped lang="less">
.table_page {
  height: 30px;
  display: flex;
  border-left: 1px solid #ccc;
  div {
    width: 32px;
    background-color: #fff;
    line-height: 30px;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    text-align: center;
    &:hover {
      cursor: pointer;
    }
  }
  .current_page {
    color: #999;
    background-color: #f5f5f5;
  }
  .fisrtPage {
    width: 50px;
  }
  .previousPage {
    width: 60px;
  }
  .nextPage {
    width: 60px;
  }
  .lastPage {
    width: 50px;
  }
}
</style>