vue前端分页

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

 

分页用的elementui的分页组件

          <div class="text item" v-for="(item, index) in contentList" :key="index">
            <p><b>{{item.vocalTract}}</b><span class="audioTime">{{item.time}}</span></p>
            <div class="audioContent">“{{item.text}}”</div>
          </div>
          <div class="bottom clearfix">
            <el-pagination
              small
              v-show="total2>0"
              :currentPage="page"
              :page-size="limit"
              :total="total2"
              layout="total, prev, pager, next"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />

total、page、limit自己设就行。

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

主要在handleCurrentChange（）方法分页。

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

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

contentList 是当前页要显示的数据