实现的效果图:
分页的功能中需要显示,总条数,每页显示条数(可更改),页码,前往第几页这些功能。
因为是真实的项目数据,所以用的数据都是接口的数据,兄弟们使用的时候改一下接口参数,表格绑定的字段名就可以使用了。
实现代码:
<template>
<div class="container">
<!-- ==========表格分页============ -->
<h1>表格分页</h1>
<el-table ref="multipleTable" :data="MediaList" tooltip-effect="dark" style="width: 100%">
<el-table-column type="index" width="50" label="#" />
<el-table-column prop="create_time" label="创建时间" width="200" />
<el-table-column prop="photo_id" label="ID" width="200" />
</el-table>
<el-pagination
background
:current-page="currentPage"
:page-size="pagesize"
:total="totalListMedia"
:page-sizes="[5, 10, 20, 30,40,50]"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper" />
</div>
</template>
<script>
export default {
data() {
return {
totalListMedia: 10, //分页单页显示条数
MediaList: [], // 接口数据
currentPage: 1, // el-pagination 第几页
pagesize: 10, // el-pagination 每页的数据
}
},
methods: {
//改变分页单页显示条数
handleSizeChange(size) {
this.pagesize = size
// 每次改变页码大小,重定向第一页
this.currentPage = 1
// 调用接口数据
this.getListMedia()
},
// 点击第几页把页码传进来,发送接口请求改变数据
handleCurrentChange(currentPage) {
this.currentPage = currentPage
// 调用接口数据
this.getListMedia()
},
//接口数据
getListMedia() {
this.$axios.post('/api/v1/file/videoList', {
advertiser_id: 10254001,
page: this.currentPage,
page_size: this.pagesize
}).then(res => {
this.MediaList = res.data.data.details
this.totalListMedia = res.data.data.total_count
})
}
},
created() {
this.getListMedia()
}
};
</script>
<style scoped="scoped" lang="scss">
.container {
background-color: white;
width: 100%;
height: 100%;
padding: 20px;
overflow-y: auto;
}
</style>
el-pagination的参数解释一下:
layout : 分页的显示效果
layout中的 total, sizes, prev, pager, next, jumper分别对应下图6个
这几个参数的顺序改变,视图会跟着改变
current-page:当前页数
page-size:分页单页显示条数
total:接口数据总条目数
page-sizes:控制单页显示多少条数据,显示10条,20条等等
@current-change:改变页码时候触发的方法
@size-change:改变控制单页显示多少条数据的时候触发的方法