vue+element-ui实现分页查询

1.前端代码

table标签

2.变量

data(){
        return{
          wfxw:[], // table中的data
          currentPage: 1, // 分页
          pageSize: 20, // 分页
          total: 1000 // 分页
          
        }
      }

3.查询table中的数据

queryTable(){
          this.axios
            .get("/api/zhxxzsComplaintLetterController/queryWfxw",{
              params:{
                currentPage: this.currentPage, //页码
                pageSize: this.pageSize,//页大小
                status:this.filters.status
              }
            })
            .then(response => {
              this.wfxw = response.data.zhxxzs;
              this.total = response.data.total;
            })
            .catch(function(error) {
              this.$message({ message: "获取失败" + error, type: "error" });
            });
       }

4.后台

@RequestMapping("/queryWfxw")
    public String getWfxwData(HttpServletResponse response, PageInfo pageInfo, HttpServletRequest request) throws  Exception{
        SqlCondition sqlCondition = new SqlCondition();
        // 查询条件
        if(request.getParameter("status") != null && !request.getParameter("status").equals("")){
            sqlCondition.addQueryParam("wfxw_Status", ""+request.getParameter("status"), CompareType.EQUALS);
        }
        sqlCondition.addQueryParam("type", "1", CompareType.EQUALS);
        sqlCondition.setPageInfo(pageInfo);
        // List list = ZhxxzsComplaintLetterService.getList(sqlCondition);
        Map result = new HashMap();
        PageList page = ZhxxzsComplaintLetterService.getPage(sqlCondition);
        result.put("zhxxzs", page.getList());
        result.put("total", page.getPageInfo().getTotalCount());
        response.getWriter().write(JsonUtils.writeValue(result));
        return null;
    }

public PageList getPage(SqlCondition condition) {
		setSchemaAndTableName(condition);
		PageInfo pageInfo = condition.getPageInfo();
		if (pageInfo == null) {
			throw new DbInvokeException("未配置pageInfo");
		}
		int currentPage = pageInfo.getCurrentPage();
		int pageSize = pageInfo.getPageSize();
		int totalCount = count(condition);
		int pageCount = (int) Math.ceil((double) totalCount / pageSize);
		int starRow = (currentPage - 1) * pageSize;
		int endRow = starRow + pageSize;
		pageInfo.setTotalCount(totalCount);
		pageInfo.setPageCount(pageCount);
		pageInfo.setStartRow(starRow);
		pageInfo.setEndRow(endRow);
		List> mapList = listMap(condition);
		List objectList = new ArrayList(mapList.size());
		Class clazz = getTClass();
		try {
			for (Map map : mapList) {
				objectList.add((T)BeanUtil.map2Bean(map, clazz));
			}
		} catch (Exception e) {
			log.error("结果集转换失败", e);
		}
		PageList pageList = new PageList<>();
		pageList.setList(objectList);
		pageList.setPageInfo(pageInfo);
		return pageList;
	}

分页采用的是客户端分页：查询到所有的数据加载到客户端，根据当前页以及每页数据数量进行分页。

前端所有代码：