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

一、DOM结构

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

二、完整 JavaScript

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

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