<el-pagination
:page-sizes="[2, 4, 6, 8]"
:current-page="searchPage.current"
:page-size="searchPage.size"
:total="searchPage.total"
layout="->,total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@next-click="nextPage"
@prev-click="prevPage">
</el-pagination>
-
:page-sizes="[2, 4, 6, 8]"
: page-sizes
属性定义了每页显示的数据量选项,这里的选项是一个数组,包含了 [2, 4, 6, 8]
四个数字。
-
:current-page="searchPage.current"
: current-page
属性指定当前选中的页码,它与 searchPage
对象中的 current
属性绑定,用于显示当前所在的页码。
-
:page-size="searchPage.size"
: page-size
属性定义每页显示的数据量,它与 searchPage
对象中的 size
属性绑定,用于指定每页要显示的数据数量。
-
:total="searchPage.total"
: total
属性指定了总共的数据量,它与 searchPage
对象中的 total
属性绑定,用于显示总数据量。
-
layout="->,total, sizes, prev, pager, next, jumper"
: layout
属性定义了分页器的布局方式,各个部分之间用逗号分隔。这个布局包含了箭头、总数据量、数据量选择、上一页、页数、下一页和跳转输入框等部分。
-
@size-change="handleSizeChange"
: size-change
事件在用户改变每页数据量选项时触发,它绑定到名为 handleSizeChange
的方法,用于处理每页数据量改变时的逻辑操作。
-
@current-change="handleCurrentChange"
: current-change
事件在用户改变当前页码时触发,它绑定到名为 handleCurrentChange
的方法,用于处理当前页码改变时的逻辑操作。
-
@next-click="nextPage"
: next-click
事件在用户点击下一页按钮时触发,它绑定到名为 nextPage
的方法,用于处理下一页按钮点击时的逻辑操作。
-
@prev-click="prevPage"
: prev-click
事件在用户点击上一页按钮时触发,它绑定到名为 prevPage
的方法,用于处理上一页按钮点击时的逻辑操作。
从后端获取数据
searchPage:{
total: 0,
size:2,
current: 0,
},
mounted() {
const params=new URLSearchParams();
//设置表单数据
params.set('currentPage','0');
params.set('size',this.searchPage.size)
axios.post('http://localhost:9000/permissionList',params)
.then(res => {
console.log(res);
this.permissionList = res.data.data.records;
this.searchPage.total = res.data.data.total;
this.searchPage.current = res.data.data.current;
})
}
prevPage:向后翻页
prevPage(val) {
console.log("向后size",this.searchPage.size)
axios.post('http://localhost:9000/permissionList', qs.stringify({
currentPage: `${val}`,
size: this.searchPage.size
}))
.then(res => {
this.permissionList = res.data.data.records;
this.searchPage.total = res.data.data.total;
this.searchPage.current = res.data.data.current;
})
},
nextPage:向前翻页
nextPage(val) {
console.log("向前size",this.searchPage.size)
axios.post('http://localhost:9000/permissionList', qs.stringify({
currentPage: `${val}`,
size: this.searchPage.size
}))
.then(res => {
this.permissionList = res.data.data.records;
this.searchPage.total = res.data.data.total;
this.searchPage.current = res.data.data.current;
})
},
handleSizeChange:切换每页几条记录
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.searchPage.size= val
this.searchPage.current=1
console.log("size",this.searchPage.size)
axios.post('http://localhost:9000/permissionList', qs.stringify({
currentPage: this.searchPage.current,
size:this.searchPage.size
}))
.then(res => {
this.permissionList = res.data.data.records;
this.searchPage.total = res.data.data.total;
this.searchPage.current = res.data.data.current;
})
},
handleCurrentChange:点击页码
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.searchPage.current= val
console.log("size",this.searchPage.size)
axios.post('http://localhost:9000/permissionList', qs.stringify({
currentPage: this.searchPage.current,
size:this.searchPage.size
}))
.then(res => {
this.permissionList = res.data.data.records;
this.searchPage.total = res.data.data.total;
this.searchPage.current = res.data.data.current;
})
},