ivue中Page组件触发on-page-size-change(改变每页条数)方法的同时会触发on-change(改变页数)方法

ivue中使用Page组件,数据存在多页的时候,从第一页切换到其他页数后,再切换每页条数,这时在触发on-page-size-change(改变每页条数)方法的同时,vue会默认把当前的页数改为第一页,从而触发了on-change(改变页数)方法

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
因为element-ui分页组件分为两种:默认分页和带有背景色的分页,因此需要选择一种并提供更具体的描述。下面我们以默认分页组件为例,给出完整的vue2版本分页组件的代码以及注释。 ``` <template> <el-pagination :total="total" // 总页数 :page-size="pageSize" // 每页显示的条数 :current-page="currentPage" // 当前页码 :layout="layout" // 分页组件的布局,分别为 total, sizes, prev, pager, next, jumper,使用逗号分隔 :pager-count="pagerCount" // 页码按钮的数量 :prev-text="`上一页`" // 上一页显示的文字 :next-text="`下一页`" // 下一页显示的文字 @size-change="handleSizeChange" // 当每页条数改变触发 @current-change="handleCurrentChange" // 当前页码改变触发 class="pagination" :disabled="disabled" /> </template> <script> export default { name: 'MyPagination', // 组件名称 props: { total: { // 总页数 type: Number, default: 0 }, pageSize: { // 每页显示的条数 type: Number, default: 10 }, currentPage: { // 当前页 type: Number, default: 1 }, disabled: { // 是否禁用 type: Boolean, default: false }, pagerCount: { // 页码按钮的数量 type: Number, default: 7 }, layout: { // 分页组件的布局 type: String, default: 'total,sizes,prev,pager,next,jumper' } }, methods: { handleSizeChange(pageSize) { // 每页条数改变触发 this.$emit('size-change', pageSize) }, handleCurrentChange(currentPage) { // 当前页数改变触发 this.$emit('current-change', currentPage) } } } </script> <style scoped> .pagination { display: flex; justify-content: center; } </style> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值