实现列表数据分页

纯前端处理分页

1.首先是写好列表和分页（element组件）

//slice(startIndex, endIndex)是用来切割每页数据的，获取当前页数据是总数据的第几条
<el-table :data="rightTableData.slice(startIndex, endIndex)" style="width: 100%" size="medium" :show-overflow-tooltip="true" max-height="400px" @row-click="tableRowDetail">
        <div v-if="typeClick == '煤矿'">
          <el-table-column prop="ssqymc" label="所属企业"> </el-table-column>
          <el-table-column prop="dwmc" label="名称"> </el-table-column>
          <el-table-column prop="mklx" label="类型" width="50">
          </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
          <el-table-column prop="jjsj" label="建矿时间"> </el-table-column>
        </div>
</el-table>
//handleCurrentChange是用来获取切换到的pageNumber也就是获取当前在第几页
//pageSize是每页的数据是多少个
//tableTotal是总共有多少条数据
<el-pagination @current-change="handleCurrentChange" :page-size="pageSize" layout="prev, pager, next" :total="tableTotal" :small="true">
</el-pagination>

2.处理分页

computed: {
    startIndex() {
      return (this.pageNumber - 1) * this.pageSize;
    },
    endIndex() {
      return this.pageNumber * this.pageSize;
    },
}

3.通过handleCurrentChange获取到当前页的页码，赋值给pageNumber，从而实现上一步中处理分页的计算

handleCurrentChange(val) {
  this.pageNumber = val;
},

后端处理分页

后端处理分页可以优化数据响应速度，主要运用在数据特别多的时候

后端处理分页的主要思路是监控当前点击的页码是多少，然后根据每页有多少条数据，将这俩参数返回给后端，后端返回当前页的数据，然后渲染上去（简单来讲就是后端只返回当前页数据，而其它页数据是空的，所以响应速度就很快，但是每点击一个页码，就要调一次接口，传递页码参数，获取数据）

1.写好列表和分页

//rightTableData是table表格的数据
<el-table :data="rightTableData" style="width: 100%" size="medium" :show-overflow-tooltip="true" max-height="400px" @row-click="tableRowDetail">
        <div v-if="typeClick == '煤矿'">
          <el-table-column prop="ssqymc" label="所属企业"> </el-table-column>
          <el-table-column prop="dwmc" label="名称"> </el-table-column>
          <el-table-column prop="mklx" label="类型" width="50">
          </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
          <el-table-column prop="jjsj" label="建矿时间"> </el-table-column>
        </div>
</el-table>
//handleCurrentChange是用来获取切换到的pageNumber也就是获取当前在第几页
//pageSize是每页的数据是多少个
//tableTotal是总共有多少条数据
<el-pagination @current-change="handleCurrentChange" :page-size="pageSize" layout="prev, pager, next" :total="tableTotal" :small="true">
</el-pagination>

2.调用接口，获取数据

async searchDetail() {
    //调用接口，接口中一定要包含参数每页数据数量pageSize和页码pageNumber，这俩参数1控制当前页所获取的数据的
    let { data } = await axios.get(`/fxpc-jk/zdjc/getTableData?id=${this.cid}&type=3&tableId=${this.tableSearchUrl}&search=${this.searchValue}&pageSize=${this.pageSize}&pageNumber=${this.pageNumber}`);
    //将获取到的数据放在table列表中
    this.rightTableData = data.result
    //这里一定要使用的是后端接口中的total，获取到的是总数据数量，如果用rightTableData.length，获取到的将永远是pageSize的数量，因为接口每次返回的只是当前页的数量也就是pageSize的数量
    this.tableTotal = data.total;
}

3.通过handleCurrentChange获取到当前页的页码，赋值给pageNumber（简单说就是监控当前点击到的是哪一页

handleCurrentChange(val) {
  this.pageNumber = val;
},

4.监控页码pageNumber切换时，要调用接口，获取新的页码数据

watch: {
    pageNumber() {
      this.searchDetail()
    }
}