vue+element分页的实现

在项目开发的过程中，不可避免的会遇到数据分页的分页的问题。今儿，我们就大概来说一下在vue+element中关于表格分页的知识。
其实，表格的分页可以分为两类。第一类是前端分页，前端分页的实质就是把通过接口把所有的数据返回回来（当然，也有可能是自己的模拟数据），然后通过pageSize（一页展示多少条数据）和pageNum(当前展示第几页)计算得出我们展示那几条数据就可以了，话不多少，我们看代码。

export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
		this.pageSize = val;
		this.pageNum = 1; //当页面展示的数据发生变化时，跳回到第一页
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum = val;
        this.getTableDataList();
      },
      getTableDataList(){
      	//res:{status:200,data:{data:[],total:200},message:'数据查询成功'}
	  	axios.post(url,data).then(res=>{
	  		this.tableData = res.data.data;  //实际返回页面的数据，展示的数据还需要计算
	  		this.totalCount = res.data.total; 
	  		//这个filterData就是当前页需要展示的数据列表 
	  		this.filterData =this.tableData.slice((this.pageNum - 1)*this.pageSize,this.pageNum *  this.pageSize)	    
	  	}).catch(err=>{
	  	    console.log(err)
	  	})
	  }
    },
    data() {
      return {
      	tableData:[],// 后台返回/模拟的数据
      	filterData:[],//页面中展示的数据
        totalCount:1, //一共有多少条数据
        pageNum: 1, //当前展示第几页的数据 
        pageSize:10, //每页展示几条数据
      };
    }
  }

第二类就是后端分页，至于后端分页就更简单了，我们在前端把后台需要的参数（pageNum,pageSize）传递过去就可以了，后台会根据我们传递过去的条件返回对应条目的数据，我们只需要将数据做展示就可以了。
ps:通常我会将请求数据的方法（在我的博客中，是this.getTableDataList()）写在mounted函数中。以便刚进入到页面中就可以看到数据。
以上就是我们这一期的所有内容了，下一期不见不散！！！
欢迎大家一起交流。