slice 实现一个简单的前端分页。

前言：由于甲方的需要，我们要改下二级菜单的展示，之前一屏直接展示19个菜单，比较多而且有滚动条不美观，现在要求一屏展示 15个（最多）。后端数据不变的情况下前端进行分页是最简单的办法。

 <div
          v-for="el in pageData"
          class="child-item"
          @click="handleEnterSystem(el, true)"
          :key="el.menuId"
       >
               {{ el.menuName }}
        </div>
        
        
  data() {
    return {
      childMenuList: [], // 总数据
      pageData: [], // 展示数据
      childLoading: false,
      pageSize: 15,
      page: 1, // 当前页
      pages: 0, // 总页数
    };
  },
  
  async getData(){
      this.childMenuList = await XXX();
      this.pageData = this.childMenuList.slice(0, this.pageSize);
      this.pages = Math.ceil(this.childMenuList.length / this.pageSize); // 注意：Math.ceil 向上取整。
  },
  // 向前翻页
      prePage() {
      if (this.page == 1) {
        return;
      } else {
        this.page--;
        this.pageData = this.childMenuList.slice(
          (this.page - 1) * this.pageSize,
          this.pageSize,
        );
      }
    },
    
    // 向后翻页
    nextPage() {
      if (this.page == this.pages) {
        return;
      } else {
        this.page++;

        this.pageData = this.childMenuList.slice(
          (this.page - 1) * this.pageSize,
          (this.page - 1) * this.pageSize + this.pageSize,
        );
        console.log(this.pageData);
      }
    },
  

基本功能大致实现。 slice 的基本用法讲解 slice() 可以从现有数组中提取一部分元素，然后返回一个新的数组。它不改变原数组。这点要和 splice 区分开。splice 可以 截取原数组的一段数据返回，但原数组会丢失截取的一段。 基本语法。 array.slice(begin, end)