使用Element UI实现分页
s第一步、引入Element ui注意:js的引入要在Vue.js的后面<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/element-ui/lib/index.js"></script
·
s第一步、引入Element ui 注意:js的引入要在Vue.js的后面
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
第二步、引入分页模板
<el-pagination
background
layout="prev, pager, next"
:total="1000">
</el-pagination>
https://element.eleme.cn/#/zh-CN/component/pagination
第三步 、设置参数
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
small | 是否使用小型分页样式 | boolean | — | false |
background | 是否为分页按钮添加背景色 | boolean | — | false |
page-size | 每页显示条目个数,支持 .sync 修饰符 | number | — | 10 |
total | 总条目数 | number | — | — |
page-count | 总页数,total 和 page-count 设置任意一个就可以达到显示页码的功能;如果要支持 page-sizes 的更改,则需要使用 total 属性 | Number | — | — |
pager-count | 页码按钮的数量,当总页数超过该值时会折叠 | number | 大于等于 5 且小于等于 21 的奇数 | 7 |
current-page | 当前页数,支持 .sync 修饰符 | number | — | 1 |
layout | 组件布局,子组件名用逗号分隔 | String | sizes , prev , pager , next , jumper , -> , total , slot | ‘prev, pager, next, jumper, ->, total’ |
page-sizes | 每页显示个数选择器的选项设置 | number[] | — | [10, 20, 30, 40, 50, 100] |
popper-class | 每页显示个数选择器的下拉框类名 | string | — | — |
prev-text | 替代图标显示的上一页文字 | string | — | — |
next-text | 替代图标显示的下一页文字 | string | — | — |
disabled | 是否禁用 | boolean | — | false |
hide-on-single-page | 只有一页时是否隐藏 | boolean | — | - |
将得到的数据与组件进行绑定,因此每个属性都需要加:来与Vue中的数据绑定
<el-pagination
background
:page-size="pageSize"
:pager-count="5"
layout="prev, pager, next"
:total="pageCount"
>
</el-pagination>
设置点击事件
事件名称 | 说明 | 回调参数 |
---|---|---|
size-change | pageSize 改变时会触发 | 每页条数 |
current-change | currentPage 改变时会触发 | 当前页 |
prev-click | 用户点击上一页按钮改变当前页后触发 | 当前页 |
next-click | 用户点击下一页按钮改变当前页后触发 | 当前页 |
上一页和下一页的事件都会触发当前页面的改变 因此我们只需要设置页码的点击事件即可
<el-pagination
background
:page-size="pageSize"
:pager-count="5"
layout="prev, pager, next"
:total="pageCount"
===================
@current-change="pager"
>
</el-pagination>
// 页码点击切换 事件
// element UI 封装了这个事件 currentPage里面存放的就是当前页码
pager:function (currentPage){
//将当前页码赋值给pageNum
this.pageNum=currentPage
// 得到当前页码 请求下一页数据
axios({
url: baseUrl + "product-comments/getCommentsByProId/" +this.productId,
methods: "get",
params:{
pageNum: this.pageNum,
pageSize: this.pageSize,
}
}).then((res) => {
//得到数据 重新渲染即可
let vo=res.data.data;
this.productComments=vo
this.pageCount=vo.total
})
}
更多推荐
已为社区贡献1条内容
所有评论(0)