人主页一颗小谷粒所属专栏Web前端开发

本系列文章为个人学习笔记在这里撰写成文一为巩固知识二为记录我的学习过程及理解。

文笔、排版拙劣望见谅。

一、后端引入PageHelper插件

--dependencygroupIdcom.github.pagehelper/groupIdartifactIdpagehelper-spring-boot-starter/artifactIdversion1.2.5/version/dependency

如图所示

main:allow-circular-references:

true

admin){PageHelper.startPage(admin.getPageNo(),

admins

//2.重新发一条sql,查询总条数PageInfoAdmin

pageInfo

el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage4:page-sizes[100,

200,

jumper:total400/el-paginationmethods:

{console.log(每页

可以根据总条数和每页显示的条数计算出总页数。

通过组件显示分页的样式。

通过组件可以改变当前页数和页数大小。

2.2

v-modelform.account/el-input/el-colel-col

:span6el-radio

v-modelform.gender男/el-radioel-radio

label女

v-modelform.gender女/el-radio/el-colel-col

:span6el-button

clicksearch()查询/el-button/el-col/el-rowbr

/el-button

iconel-icon-plus新增/el-buttonel-table

:datatableData

width100/el-table-columnel-table-column

propgender

width100/el-table-columnel-table-column

propphone

width150/el-table-columnel-table-column

propadmin.account

label操作人/el-table-columnel-table-column

propoperTime

aligncenter/el-table-columnel-table-column

label操作

typedanger删除/el-button/template/el-table-column/el-tableel-pagination

current-changehandleCurrentChange:current-pageform.pageNo

:page-sizes[2,

:totaltotal/el-pagination/el-card/div

default

{this.$http.post(adminCtl/admins,

{this.tableData

resp.data.result.list;this.total

resp.data.result.total;})},handleSizeChange(val)

//当改变下拉框页数大小时触发this.form.pageSize

val;this.form.pageNo

1;this.admins();},handleCurrentChange(val)

{//向后端发送请求查询管理员信息列表this.admins();}}

/scriptstyle

本次的分享就到此为止了希望我的分享能给您带来帮助创作不易也欢迎大家三连支持你们的点赞就是博主更新最大的动力如有不同意见欢迎评论区积极讨论交流让我们一起学习进步有相关问题也可以私信博主评论区和私信都会认真查看的我们下次再见