美文网首页
element手动分页

element手动分页

作者: 顺小星 | 来源:发表于2020-01-06 16:56 被阅读0次

需要传参分页步骤的,点击下方链接。按步骤复制粘贴即可。

【最棒的讲解】细说分页


下面我们来总结一下手动分页的步骤

整理一下思路,手动分页就是:
1、先拿到每次查询之后的全部数据;(此为总的大数组)
2、在点击页码时,到大数组里面按页码取出对应的一段数据放到页面上。

第0步准备工作:

html中分页组件:

<el-pagination 
    background :model="pageData" 
    @current-change="handleCurrentChange" 
    :current-page="pageData.currentPage"
    :page-size="pageData.pageSize" 
    :total="pageData.total" 
     layout="total, prev, pager, next, jumper">
</el-pagination>

data中分页对象的定义:

data() {
    return {        
        pageData: {          // 用于分页请求的 obj 
        currentPage: 1,    //当前页
        pageSize: 10,      // 一页放多少数量
        total: 0                 //   总共数据量
    }
  }
}

第一步:“ 拿到每次查询之后的全部数据 ”

卧槽项目太赶了,等忙完回来再写-------2020.1.6. 16:56

相关文章

网友评论

      本文标题:element手动分页

      本文链接:https://www.haomeiwen.com/subject/qoykactx.html