如何使用element-ui中的分页组件

分页组件里面的属性比较多，下面先看看官方给的都有哪些属性

<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>

@size-change="handleSizeChange"这个意思是监听pagesize每页显示多少条数据，在methods中进行函数定义

handleSizeChange(newSize){
      // 将最新的页面条数传递到queryInfo中
      this.queryInfo.pagesize=newSize
      // 重新刷新渲染页面数据
      this.getgoodsList()
    }

queryInfo是data中定义的页面属性内容对象
@current-change="handleCurrentChange"当前的页码值，如果发生变化会触发该函数
:current-page="queryInfo.pagenum"当前所渲染的页码，应当绑定到queryInfo中的pagenum上

:page-sizes="[100, 200, 300, 400]"

表示每页可以展示多少条数据

:page-size="100"

表示当前每页展示多少条数据

layout="total, sizes, prev, pager, next, jumper"

表示组件需要哪些功能，不需要的功能把相应的英文删除就行

:total="total"

total应该绑定到data中当前的总数据条数