基于 elementUI与Vue的前端翻页功能

基于 elementUI与Vue的前端翻页功能

• 基本的UI结构

  

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.queryInfo.pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="this.queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.total"
        >
        </el-pagination>

• 配置项介绍

  @size-change="handleSizeChange"

  当页面的页容量发生变化时所触发的事件

  @current-change="handleCurrentChange"

  当页面的页码发生变化时所触发的事件

  :current-page="this.queryInfo.pagenum"

  当前的页码数

  :page-sizes="[5, 10, 15, 20]"

  每页显示多少条数据(非调用接口型，仅在渲染上处理)

  :page-size="this.queryInfo.pagesize"

  每页显示多少条数据(调用接口型，更改数据源)

  :total="this.total"

  数据总条数

• 定义的数据

​

• 获取总的列表数据

​

• elementUI的分页事件函数

• ​

newSize就是UI界面上的页面容量，通过eleUI自带的内置对象传递给vue的函数，newPage同理

• 后端接口相关数据

  ​

  

总结： 先根据接口获取整个列表，然后根据eleUI返回的页面数值（newSize,newPage）赋值给调用接口的请求体（queryInfo）再次调用接口，重新渲染table列表，以达到效果。