直播平台制作，vue + element ui 实现前端分页

直播平台制作，vue + element ui 实现前端分页

一、DOM结构

<el-pagination @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" background>
</el-pagination>
 

​

二、完整 JavaScript

export default {
  name: 'index',
  data(){
      return {
        // 权限列表，向后台请求数据获取，格式为[{},{},{}]
        rightsList:[],
        // 分页数据,这里用来保存每页切割后的数据
        // 格式为[[{},{},{}],[{},{},{}]]
        // 数组内套数组，每个数组就是一页数据
        totalPageData: [],
        // 共几页
        pageNum:1,
        // 每页显示数量
        pageSize:5,
        // 当前显示页码
        currentPage:1,
        // 总共多少条数据
        total:1,
        // 当前要显示的数据
        dataShow:[]
    }
}
  created() {
    this.$api.queryRoomList().then(res => {
      // 需要分页的数据
      this.rightsList = res.rows
      this.total = res.rows.length;
      // 计算页数
      this.calcPageData();
    })
  },
   methods: {
calcPageData(){
    // 计算页数(根据后台数据的条数和每页显示数量算出一共几页,得0时设为1)
    if(this.rightsList.length > 1){
        this.pageNum = Math.ceil(this.rightsList.length / this.pageSize) || 1;
    }
    // 数据分组
    for (let i = 0; i < this.pageNum; i++) {
        // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
        // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
        this.totalPageData[i] = this.rightsList.slice(this.pageSize * i, this.pageSize * (i + 1));
    }
    // 获取到数据后显示第一页内容,数组下标是从0开始的，这里一定要减去1，不然会丢失一组数据
    this.dataShow = this.totalPageData[this.currentPage - 1];
},
 // 每页条数发生变化
handleSizeChange(val) {
    this.pageSize = val;
    // 重新计算页数并分组
    this.calcPageData();
},
// 当前页码发生变化
handleCurrentChange(val) {
    this.currentPage = val;
    // 这里仍然不要忘记减去1
    this.dataShow = this.totalPageData[newPageNum - 1];
}
}
}

 以上就是 直播平台制作，vue + element ui 实现前端分页，更多内容欢迎关注之后的文章