直播平台制作,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 实现前端分页,更多内容欢迎关注之后的文章