1 使用环境
- Vue
- Element 新版
用element的组件el-pagination来实现表格分页操作
2 代码
el-pagination属性
<el-pagination
v-model:current-page="page.index"
:page-size="page.size"
layout="total,prev, pager, next"
:total="page.total"
@current-change="handleCurrentChange">
</el-pagination>
page属性
page:{
//当前页码
index:1,
//每页展示数据数目
size:2,
// 总共数据数目
total:10
},
页码改变值函数
// 监听页码值改变事件
handleCurrentChange(currentPage){
// 改变当前页码
console.log(currentPage)
this.page.index = currentPage;
console.log(this.page.index)
// 重新获取数据
this.getTableData()
},
3 实现效果
实现效果图
4 踩坑
elpagination中的total属性没明白，将total设为2，我认识每页展示的数据直接由展示的表格决定，就没有设置page-size，无法点击页码的左右箭头。但是加上之后，就能点击。
因为页码的计算是由total总数来除每页显示的数据量得到的，所以page-size,total都需要进行绑定
5 代码
<template>
<el-pagination
v-model:current-page="page.index"
:page-size="2"
layout="total,prev, pager, next"
:total="3"
@current-change="handleCurrentChange">
</el-pagination>
</template>
<script>
import {defineComponent, reactive,ref} from "vue";
export default defineComponent({
methods: {
// 监听页码值改变事件
handleCurrentChange(currentPage){
// 改变当前页码
console.log(currentPage)
this.page.index = currentPage;
console.log(this.page.index)
// 重新获取数据
this.getTableData()
},
},
data() {
return {
//页码
page:{
//当前页码
index:1,
//每页展示数据
size:2,
// 总页数
total:10
},
}
}
})
</script>
