vue使用element-ui实现分页功能

不分页功能坏处：

1. 一次性加载数据量大，加载缓慢
2. 页面篇幅过多

分页不仅仅指将数据展示分页，同时在点击不同页数的时候向后端请求本页需要的数据，而非一次性请求数据将数据分成不同的页。如果我们采用后者，一次性请求数据，将数据分配到不同的页，而我们只访问了第一页，其他的几百页的数据就会被浪费。

这里结合element-ui中的table与分页来进行处理实现。

如下图所示，我们实现点击不同的页数，便向后端发送不同的请求来获取数据。

页面代码

        
          :row-class-name="tableRowClassName">
          
            
          
          
          
        
        

          
          
        

我们的重心需要放在下面页数的变化上来

@current-change="handleCurrentChange"

这里还需要注意两个参数

// 每页数据的最大数目，这里用来控制tabledata的数据最大个数，向后端发出请求的一个携带参数
:page-size="size"
// 当前页数，向后端发出请求的一个携带参数
:current-page="currentPage"

实现@current-change的方法

// val 即当前的页数
handleCurrentChange(val) {
     
    // 与后端接口交互的函数
      getNewsByPage(this.size, val).then(res => {
     
          // tabledata数据渲染
        this.tableData = res.results;
        this.count = res.count;
      })
}