vue前端分页

偷懒了，其他都是老老实实后端分页的，就这一个，前端涉及音频和三个接口的获取，之前写在一起了没分开。要是还用后端分页，要重新写，想着数据量不大，干脆在前端分页了。

分页用的elementui的分页组件

 1           <div class="text item" v-for="(item, index) in contentList" :key="index">
 2             <p><b>{{item.vocalTract}}</b><span class="audioTime">{{item.time}}</span></p>
 3             <div class="audioContent">“{{item.text}}”</div>
 4           </div>
 5           <div class="bottom clearfix">
 6             <el-pagination
 7               small
 8               v-show="total2>0"
 9               :currentPage="page"
10               :page-size="limit"
11               :total="total2"
12               layout="total, prev, pager, next"
13               @size-change="handleSizeChange"
14               @current-change="handleCurrentChange"
15             />

total、page、limit自己设就行。

handleSizeChange也正常写就行，不改变size的话这个也可以略了，我上面没加。

主要在handleCurrentChange（）方法分页。

 1       handleSizeChange(val) {
 2         // 改变每页显示的条数 
 3         this.limit=val
 4         // 注意：在改变每页显示的条数时，要将页码显示到第一页
 5         this.page=1
 6       },
 7       // 现在显示当前页的第几页
 8       handleCurrentChange(val) {
 9         // 改变默认的页数
10         this.page=val
11         this.contentList = this.contentList2.slice((this.page-1)*this.limit,this.page*this.limit)        
12       },

contentList2保存了从接口拿到的数据

contentList 是当前页要显示的数据