我在vue+element ui中 Pagination分页 中我的代码无效呢？

Question

我在vue+element ui中 Pagination分页 中我的代码无效呢？

附上我的代码

    {{totalone}}

       <el-pagination

          @size-change="handleSizeChange"

          @current-change="handleCurrentChange"

          :current-page="currentPage4"

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

           :page-size="5"

　　　　　　:total="totalone"> 

　　　　</el-pagination>

　　　　

{{totalone}}是我的总数据

我的页面效果是这样的

我想每5条是一页，但是我的没有效果
在线等，请问是为什么呢？

Answer 1

是这个吗？:current-page="currentPage"

Answer 2

pagination 只是分页选择器 ，，，数据的展示多少需要在请求的时候，或者自己生成的时候去限制，而不是说你用el-pagination 就会给你把你的数据处理掉

Answer 3

element ui的分页并不能帮你把数据切分，你需要手动处理你的数据就是：比如你的总数据是listData,你可以在data里加一个pageData,这个用作页面数据展示pageData = listData.slice(当前页每页个数,(当前页每页个数)*每页个数)在你的handleSizeChange及handleCurrentChange函数里，都要触发一次这个代码

Answer 4

列表页：分页组件：&nbsp; <page :page-data="pageData" v-on:pageEvent="pageChange" ></page>&nbsp;//分页操作&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pageChange(data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.getList(data.pageSize，data.currentPage);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },分页页面：&nbsp;//改变每页显示条数size&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; handleSizeChange(val) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let curData = this.pageData&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; curData.pageSize = val&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.$emit('pageEvent',curData)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //当前页数&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; handleCurrentPageChange(val) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let curData = this.pageData&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; curData.currentPage = val&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.$emit('pageEvent',curData)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }