vue在后端接口中无分页后端接口时，实现简单的分页功能

vue在后端接口中无分页后端接口时，实现简单的分页功能

这里我默认大家前面已经请求到后台的所有数据，接下来对后台数据做分页处理
使用element-ui组件的分页按钮（这里因人而异，可以用这个框架，也可以不用）
html部分：

<div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage1"
              :page-size="pageSize"
              layout="total, prev, pager, next"
              :total="total">
            </el-pagination>
</div>

js部分：
在methods里面编写：

handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
handleCurrentChange(val) {
        //点击对应的页面数刷新当前显示的数据
        this.currentPage1 = val;
        //前面封装findAllemployees()函数默认通过axios请求后台所有数据
        this.findAllemployees(); 
      }

设置变量：

data(){
    return{
      employees:[],     //请求得到的所有后台数据来源，相当于data
      currentPage1:1,  //默认显示第几页的数据
      pageSize:6,   //当前页面显示多少条数据
      total:0,      //一共多少条后台的数据
      dataShow:[],  //当前显示的数据
      pageNum:1,    //共有几页
      totalPage:[], //所有页面的数据
      }
}

对数据进行分页处理

computed:{       //在计算属性中添加方法
    employeeList(){     //定义一个employeeList()函数方法
       //避免this指向错误
      var self = this;

//第一步：计算页数
      //若无后台数据在这里简单的模拟一下后台的数据
      // for(let i = 0;i<self.total;i++){
      //   this.data.push({ name: "cjj" ,look:"very handsome"});
      // }
      
      // 根据后台数据的条数和每一页显示数据算出一共几页，得0时设为1；
      this.pageNum = Math.ceil(self.total / self.pageSize) || 1;
      // console.log(this.pageNum,'----');  //自己尝试着打印一下是否得到想要的结果

//第二步：根据页数对数据进行分组，并存进每一页中
      // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
      // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
      for(let i = 0; i < this.pageNum;i++){
        this.totalPage[i] = this.employees.slice(self.pageSize * i,self.pageSize * (i + 1))
      }
      //  获取到数据后显示的第一页内容
      this.dataShow = this.totalPage[self.currentPage1 - 1];
      //  console.log(this.dataShow,'+++');
      //返回数据
      return this.dataShow;
    },

//第三步：设置默认显示页，上一页和下一页，只要切换当前页面的索引值就可以了
    // 设置下一页
     nextPage(){
       if(this.currentPage1 === this.pageNum - 1) return;
       this.dataShow = this.totalPage[++this.currentPage1];
     },
    //  设置上一页
     prePage(){
       if(this.currentPage1 === 0) return;
       this.dataShow = this.totalPage[--this.currentPage1];
     },
  },