vue+iview框架前端页面实现分页

描述

前面提到了项目做搜索的时候结合了分页，现在把分页简单总结下

效果

前端代码

data(){}里要初始化total（数据显示总数）、pageNo（当前页面）、size（每页条数）

<!-- 将后台获取到的数据以表格的形式展示 -->
    <Card style="margin-top:10px;">
      <Table stripe border :loading="loading" :columns="columns" :data="datalist"></Table>
    </Card>
<!-- 分页 -->
    <Card style="margin-top:10px;">
      <Page
        :total="total"
        show-elevator
        show-total
        @on-change="goPage"
        @on-page-size-change="sizeTo"
        show-sizer
        :page-size-opts="[10, 20, 50, 100]"
      />
    </Card>

    goPage(n) {
      n = n || 1;
      this.req.pageNo = n;
      this.loading = true;
      this.$global.get("report/list", this.req).then(res => {
        if (res.success) {
          this.datalist = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        } else {
          this.$Message.error(res.errorMsg);
        }
      });
    },
    sizeTo(size) {
      this.req.size = size;
      this.goPage(this.req.pageNo);
    }

后端代码

//Controller
	@GetMapping("/list")
	public ResponseInfo list(Integer pageNo, Integer size) {
		return ResponseInfo.success(service.selectByPage(pageNo, size));
	}

//Service
	public PageInfo<Report> selectByPage(Integer pageNo, Integer size) {
		if (null == pageNo)
			pageNo = 1;
		if (null == size)
			size = 10;
		ReportExample example = new ReportExample();
		PageHelper.startPage(pageNo, size);
		List<Report> list = mapper.selectByExample(example);
		return new PageInfo<>(list);
	}

分页maven依赖

		<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper</artifactId>
			<version>${pagehelper.version}</version>
		</dependency>
		<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper-spring-boot-autoconfigure</artifactId>
			<version>${pagehelper-spring-boot.version}</version>
		</dependency>
		<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper-spring-boot-starter</artifactId>
			<version>${pagehelper-spring-boot.version}</version>
		</dependency>