前端实现分页

<template>
  <div>
    <div id="PaginationSimple">
      <table class="table-main">
        <tr class="table-header">
          <th v-for="(item,index) in tableHead" :key="index">{{item}}</th>
        </tr>
        <tr class="table-detail" v-for="(item, index) in currentPageData" :key="index"
          :class="{ whited: index % 2 === 1 }">
          <th>{{ item.id }}</th>
          <th>{{ item.productName }}</th>
          <th>{{ item.manufactureDate }}</th>
          <th>{{ item.publisher }}</th>
          <th>
            <button @click="previewSelected(item)">预览</button>
            <button @click="downloadSelected(item)">下载</button>
            <button @click="delSelectedTableDetail(item)">删除</button>
          </th>
        </tr>
        <div class="table-pagination">
          <div>
            共{{tableDetailLength}},每页{{pageSize}}条

            <!-- 上一页  -->
            <button @click="prePage"> 上一页</button>

            <!-- 点击 按钮 实现分页  -->
            <button v-for="(item,index) in totalPageArray" :key="index"
              :class="{selected:item ==currentPage}" @click="selectPage(item)">
              {{item}}
            </button>

            <!-- 下一页  -->
            <button @click="nextPage"> 下一页</button>

            <!-- 到第xxx 页  -->
            到第<input type="text" v-model="inputPage" @keyup.enter="selectPage(inputPage)">
            页
            <button class="confirm-page" @click="selectPage(inputPage)">确定</button>
          </div>
        </div>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表头 
      tableHead: ["序号", "产品名称", "制作日期", "发布人", "操作"],
      // 表身体 
      tableDetail: [],
      // 分页器相关
      currentPage: 2, // 当前页
      pageSize: 3, // 每页显示多少条
      tableDetailLength: 1, // 总数据条数
      totalPageArray: [], // 存储按钮
      totalPage: 1, // 按钮数量
      inputPage: null
    }
  },
  computed: {
    currentPageData: function() {
      let begin = (this.currentPage - 1) * this.pageSize;
      let end = this.currentPage * this.pageSize;
      return this.tableDetail.slice(begin, end);
    },
  },
  mounted() { // 拿到数据
    this.tableDetail = [{
        id: "1",
        productName: "天气预报",
        manufactureDate: "1月1日",
        publisher: "思思",
      },
      {
        id: "2",
        productName: "天气预报",
        manufactureDate: "1月1日",
        publisher: "思思",
      },
      {
        id: "3",
        productName: "天气预报",
        manufactureDate: "1月1日",
        publisher: "思思",
      },
      {
        id: "4",
        productName: "天气预报",
        manufactureDate: "1月1日",
        publisher: "思思",
      },
      {
        id: "5",
        productName: "天气预报",
        manufactureDate: "1月1日",
        publisher: "思思",
      },
      {
        id: "6",
        productName: "天气预报",
        manufactureDate: "1月1日",
        publisher: "思思",
      },
      {
        id: "7",
        productName: "天气预报",
        manufactureDate: "1月1日",
        publisher: "思思",
      },
      {
        id: "8",
        productName: "天气预报",
        manufactureDate: "1月1日",
        publisher: "思思",
      },
      {
        id: "9",
        productName: "天气预报",
        manufactureDate: "1月1日",
        publisher: "思思",
      },
      {
        id: "10",
        productName: "天气预报",
        manufactureDate: "1月1日",
        publisher: "思思",
      },
      {
        id: "11",
        productName: "天气预报",
        manufactureDate: "1月1日",
        publisher: "思思",
      },
      {
        id: "12",
        productName: "天气预报",
        manufactureDate: "1月1日",
        publisher: "思思",
      },
      {
        id: "13",
        productName: "天气预报",
        manufactureDate: "1月1日",
        publisher: "思思",
      },
    ];
    // 有多少条数据
    this.tableDetailLength = this.tableDetail.length
    // 计算有几个按钮
    let num = this.tableDetailLength / this.pageSize

    for (let i = 1; i <= num; i++) {
      this.totalPageArray.push(i)
    }

    // 避免出现数据条数是奇数没有按钮点击可以分页 
    if (this.tableDetail.length % this.pageSize !== 0) {
      this.totalPageArray.push(this.totalPageArray.length + 1)
    }

    // 得到按钮总数
    this.totalPage = this.totalPageArray.length
  },
  methods: {
    // 实现 点击 1 2 3 4 切换 
    selectPage(item) {
      this.currentPage = item
    },
    // 上一页
    prePage() {
      if (this.currentPage === 1) return // 等于1 不继续执行
      this.currentPage--
    },
    // 下一页 
    nextPage() {
      if (this.currentPage === this.totalPage) return; // 等于按钮数量 不往下执行
      this.currentPage++;
    }
  }
}
</script>

<style lang="less" scoped>
#PaginationSimple {
  width: 79%;
  height: calc(100% - 100px);
  margin-top: 23px;
  margin-left: 1%;

  .table-main {
    .table-head {
      background: #f0f7ff;
      height: 40px;
      font-size: 14px;
      color: #4d4d4d;

      th {
        font-weight: normal;
        width: 230px;
      }

      th:nth-child(4),
      th:nth-child(5),
      th:nth-child(6) {
        width: 169px;
      }

      th:nth-child(7) {
        width: 320px;
      }
    }

    .table-detail {
      border-bottom: 1px solid #eeeeee;
      height: 44px;
      font-size: 14px;
      color: #4d4d4d;

      th {
        font-weight: normal;
        width: 230px;
      }

      th:nth-child(4),
      th:nth-child(5),
      th:nth-child(6) {
        width: 169px;
      }

      th:nth-child(7) {
        width: 320px;

        button {
          font-size: 12px;
          color: #ffffff;
          width: 48px;
          height: 24px;
          border-radius: 12px;
          margin: 0 5px;
        }

        button:nth-child(1) {
          background: linear-gradient(-90deg, #2f87f5, #126cdc);
          border: 1px solid #126cdc;
        }

        button:nth-child(2) {
          background: linear-gradient(-90deg, #5f75f6, #6768ef);
          border: 1px solid #6768ef;
        }

        button:nth-child(3) {
          background: linear-gradient(-90deg, #f28255, #ef6747);
          border: 1px solid #ef6747;
        }
      }
    }

    .whited {
      background-color: #f7f7f7;
    }
  }

  .table-pagination {
    color: #353535;
    font-size: 14px;
    position: relative;
    width: 500px;
    height: 75px;
    line-height: 75px;
    border-left: 1px solid #eeeeee;
    border-right: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;

    div {
      position: absolute;
      right: 14px;

      button {
        background-color: transparent;
        width: 24px;
        height: 24px;
        border: none;
      }

      .selected {
        background-color: #006dfa;
        color: #ffffff;
      }

      input {
        width: 65px;
        height: 26px;
        border: 1px solid #d9d9d9;
        border-radius: 2px;
        margin: 0 15px 0 10px;
      }

      .confirm-page {
        border: 1px solid #d9d9d9;
        border-radius: 2px;
        width: 48px;
        height: 27px;
        margin: 0 10px;
      }
    }
  }
}
</style>