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

不分页功能坏处：

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

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

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

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

页面代码

        <el-table :data="tableData" 
                  :row-class-name="tableRowClassName">
          :row-class-name="tableRowClassName">
          <el-table-column
              prop="title"
              label=""
              width="500">
            <template slot-scope="scope">
              <a @click="detail(scope.row.id)" style="color:black;cursor:pointer;font-size: 16px;">{{
                  scope.row.title
                }}</a>
            </template>
          </el-table-column>
          <el-table-column
              prop="author"
              label=""
              width="100">
          </el-table-column>
        </el-table>
        <div style="text-align: center; margin-bottom: 10px;float: bottom">
          <el-pagination
              @current-change="handleCurrentChange"
              :page-size="size"
              :current-page="currentPage"
              layout="prev, pager, next"
              :total="count">
          </el-pagination>
        </div>

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

@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;
      })
}