封装分页

elment官网复制过来的分页
 <el-pagination
      @size-change="handleSizeChange"  //表示一页显示10条数据或者20条数据。勾选的时候会触发
      @current-change="handleCurrentChange" //表示输入2或3跳转到第几页触发刚方法
      :current-page="currentPage4"  //表示当前在哪一页
      :page-sizes="[100, 200, 300, 400]"   //表示每页显示多少条
      :page-size="100"   //一页显示多少条数据
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">   //总数据
    </el-pagination>

项目例子

分页父组件

 <div class="pagination">
         <div>共 {{ total }} 条数据</div>
        <Pagination :total="total" :page="pageNum" :limit="pageSize" @pagination="pagination" />
 </div>

备注:   total  //总数据
        pageNum:当前页，默认第1页
         pageSize：默认每一页显示数据，默认10条数据

image.png image.png

分页子组件

image.png

有些人可能不明白这个这个子组件pagination.vue为啥pageSizes写在props里面而不是写在data里面，这是因为加入我们其他页面的pageSizes有其他要求就得放在props里面，由父组件传过来。layout这些是同理的

image.png

@size-change="handleSizeChange" 触发这个方法的时候表示点击选中每页显示多少条数据。
@current-change="handleCurrentChange"触发这个方法的时候表示输入框几跳转到第几页。

image.png