vue实现分页的两种方式

vue实现分页的两种方式

（1）方法一：使用slice方法

一次调用后端接口返回所有数据tableData，然后使用tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)使得数据根据页码改变

 <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" stripe style="width: 100%">
      <el-table-column prop="project_name" label="项目名称" width="150">el-table-column>
      <el-table-column prop="project_id" label="项目代码" width="150">el-table-column>
    el-table>
   <el-pagination
          :current-page.sync="currentPage"
          @current-change="handlePageChange"
          :page-size="pageSize"
          :page-sizes = "[2, 10, 50, 500]"
          layout="total, prev, pager, next"
          :total="dataCount">
      el-pagination>

（2）方法二：

每次换页都调用接口，后端每次返回该页的数据

html部分：

<el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="project_name" label="项目名称" width="150">el-table-column>
      <el-table-column prop="project_id" label="项目代码" width="150">el-table-column>
    el-table>
   <el-pagination
          :current-page.sync="currentPage"
          @current-change="handlePageChange"
          :page-size="pageSize"
          :page-sizes = "[2, 10, 50, 500]"
          layout="total, prev, pager, next"
          :total="dataCount">
      el-pagination>

js部分：

  handlePageChange(pageNum) {
      this.searchItem.limit = this.pageSize;
      this.searchItem.page = pageNum;
      this.currentPageNum = this.searchItem.page;
      this.search(this.searchItem);
    },
  search(argumentObj) {
      let self = this;
      const BaseUrl = this.$util.getAjaxUrl('type_8')
      const url = BaseUrl + '/api/tProjectManagement/getTProjectManagementList'
      axios.get(url,argumentObj).then(function(response) {
        if (response.data.status === -1) {
          self.$message.error({
            content: response.data.msg
          })
        } else {
          self.tableData = response.data.data.list; 
          self.dataCount = response.data.data.total;
          self.loadingList = false
        }
      }).catch(function(error) {
        console.log(error);
      });
    },