element-UI+Vue+SpringBoot 分页查询

前端分页插件使用element-UI的<el-pagination></el-pagination>

组件代码

    <el-pagination
      style="margin-top:15px;"
      background
      layout="prev, pager, next"
      :current-page.sync="pagination.page"
      :page-size.sync="pagination.size"
      :total="pagination.count"
      @current-change="handleCurrentChange">
    </el-pagination>

current-page，指定当前的页码数

page-size，指定每页的数据条数

total，总记录条数

current-change，当页码数发生改变时触发的事件

Vue代码

在vue中初始化分页条件

        //初始分页条件
        pagination: {
          page: 1,
          size: 8,
          count: 0,
        },

将分页参数发送到后台