Element-ui框架中分页效果

我们都知道，分类效果在后台管理中必不可少的一门绝学，但是在element-u i中这一绝学有了很大施展范围

      <el-pagination                 // 表示分页的组件

        @size-change="handleSizeChange"    // 该地方表示在方法中所定义的 handleSizeChange的方法

        @current-change="handleCurrentChange"  // 跟上面一致，也是 在方法中定义的handleCurrentChange

        :current-page="queryInfo.pagenum"   //  这里表现的是指你所定义的查询条件等等，其中queryInfo是你定义的对象的名称，pagenum表示

        :page-sizes="[5, 7, 9, 11]"     //  每页，显示的条数

        :page-size="queryInfo.pagesize"    // 跟上面同理

        layout="total, sizes, prev, pager, next, jumper" // 表示你这里触发的多种方式

        :total="total"    // 这里的total是指你在data中显示的总条数

      ></el-pagination>

该地方是你在data中定义的一个属性对象

该total是显示你在该页码渲染的条数

当你指向queryInfo对象中的pagesize 赋值给参数newSize

然后在this.getUsersList页码数据时刷新页面渲染出来

该分页效果可以在element-ui框架中查询分页效果，连接如下

https://element.eleme.cn/#/zh-CN/component/pagination