项目中用到了表格的分页,所以总结了一下:
首先是布局:
<el-pagination @size-change="changeSizeHandle" @current-change="currentChangeHandle"
:current-page="currentPage" layout="total, sizes, prev, pager, next, jumper"
:total="total" background>
</el-pagination>
layout,表示需要显示的内容,用逗号分隔,布局元素会依次显示。
prev表示上一页,next为下一页,pager表示页码列表。
特殊的布局符号->:->后的元素会靠右显示。
jumper表示跳页元素。
total表示显示页码总数,size用于设置每页显示的页码数量。
接下来,事件处理:
<script>
export default {
data() {
return {
roleList: [], // 总数据
total: 0, // 总条数,根据接口获取数据长度(注意:这里不能为空)
size: 10, //默认每页数据量
currentPage: 1 // 默认显示第一页
};
},
methods: {
// 每页显示的条数改变
changeSizeHandle(val) {
this.size = val // 改变每页显示的条数
this.currentPage = 1 // 注意:在改变每页显示的条数时,要将页码显示到第一页
this.getInfo() // 点击每页显示的条数时,显示第一页
console.log(`每页 ${val} 条`)
},
// current-change用于监听页数改变,而内容也发生改变
currentChangeHandle(val) {
this.currentPage = val // 改变默认的页数
this.getInfo() // 切换页码时,要获取每页显示的条数
console.log(`当前页: ${val}`)
},
// 查询信息
async getInfo() {
axios.get(this.baseURL + '/role/getInfo', { params: {
pageSize: this.size,
pageIndex: this.currentPage,
}})
.then( response => {
this.roleList = []
this.roleList = response.data.data.rows
this.total = response.data.data.total
})
.catch( error => {
console.log(error)
})
}
}
}
</script>
页面效果如下: