根据获取集合指定位置以及特定数量的元素做虚拟分页

后端java代码

@ApiOperation(value = "待办任务", notes = "待办任务")
    @GetMapping("/todoTask/list")
    @ApiImplicitParams({
            @ApiImplicitParam(name = "module", value = "模块名称"),
            @ApiImplicitParam(name = "taskName", value = "标题"),
            @ApiImplicitParam(name = "pageNum", value = "当前记录起始页"),
            @ApiImplicitParam(name = "pageSize", value = "每页显示条数")
    })
    public TableDataInfo getTodoItems(@RequestParam(value = "module", required = false) String module,
                                      @RequestParam(value = "taskName", required = false) String taskName) {
        /**第一步：pageNum和pageSize是从前端数据里传进来的分页对象的属性**/
        PageDomain pageDomain = TableSupport.buildPageRequest();
        Integer pageNum = pageDomain.getPageNum();
        Integer pageSize = pageDomain.getPageSize();
        String userName = SecurityUtils.getUsername();
        List<TodoTaskDTO> result = new ArrayList<TodoTaskDTO>();
        /**第二步：过滤数据**/
        TodoTaskDTO vo = new TodoTaskDTO();
        vo.setTitle(taskName);
        vo.setType(module);
        vo.setAssignee(userName);
        /**第三步：拼接list集合**/
        List<TodoTaskDTO> safeTaskList = taskCenterService.getSafeHiddenTodoItem(vo);
        List<TodoTaskDTO> riskTaskList = taskCenterService.getRiskTodoItem(vo);
        List<TodoTaskDTO> accTaskList = taskCenterService.getAccTodoItem(vo);
        List<TodoTaskDTO> accReportTaskList = taskCenterService.getAccReportTodoItem(vo);
        List<TodoTaskDTO> emergencyTaskList = taskCenterService.getEmergencyTodoItem(vo);
        result.addAll(safeTaskList);
        result.addAll(riskTaskList);
        result.addAll(accTaskList);
        result.addAll(accReportTaskList);
        result.addAll(emergencyTaskList);
        /**第四步：获取处理好的list集合**/
        int num = result.size();
        result = result.stream().skip((pageNum - 1) * pageSize).limit(pageSize).collect(Collectors.toList());
        TableDataInfo rspData = new TableDataInfo();
        rspData.setCode(0);
        rspData.setRows(result);
        rspData.setTotal(num);
        return rspData;
    }

前端vue代码

<!--  分页 -->
<pagination
      v-show="isShowPagination"
      :total="totalCount"
      :page.sync="requestParams.pageNum"
      :limit.sync="requestParams.pageSize"
      @pagination="getRecordListFromServe"
/>

computed:{
      // 是否显示分页
      isShowPagination() {
        if (this.totalCount > 10) {
          return true;
        } else {
          return false;
        }
      },
    },

mounted() {
   // 从服务端获取记录列表
   this.getRecordListFromServe()
},

methods: {
      // 从服务端获取项目列表
      async getRecordListFromServe() {
        this.isLoading = true;
        const result = await getRecordListApi(this.taskId,this.requestParams);
        // 格式化记录数据
        this.formattingRecordData(result.data)
      },
      // 格式化记录数据
      formattingRecordData(recordData) {
        let { headers, tableData,total } = recordData
        // 总的记录列表
        this.allRecordList = tableData
        this.totalCount = total;
        this.isLoading = false;
        // 记录列表
        const showRecordList = []
        // 删除照片/视频
        //headers.splice(2, 1)
        // 遍历表格数据
        tableData.forEach((recordItem) => {
          //recordItem.splice(2, 1)
          const colItem = {}
          recordItem.forEach((item, index) => {
            colItem[`col${index}`] = item
          })
          showRecordList.push(colItem)
        })
        // 赋值
        this.recordHeaders = headers
        this.showRecordList = showRecordList
      },
}

小结： 简单的数据类型的分页或者量小的数据可以使用，但是复杂的数据类型分页不推荐这种，随着数据的增多，效率会变得比较慢