在vue中分页出现的情况-树形控件与分页控件结合使用

7 篇文章 1 订阅
64.使用vue中进行分页时出现的情况

1.树形控件与分页控件结合使用出现的情况

在这里插入图片描述

**原因:**由于工业软件室这个部门的人数很少,使用PageHelper组件进行分页时需要设置currentPage和pageSize两个参数,currentpage:表示当前页,pageSize:每页显示的数量。

如果选择其他部门时没有将currentpage初始化为1,假设currentpage=4,这是PageHelper就会查询第四页的数据,然而数据量比较少,分页总数达不到4。就会出现查出的数据为空。

每次选择部门的时候需要将currentpage参数进行初始化,这样可以避免上述的错误。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
分页器是一个常见的 UI 控件,用于展示数据的分页情况,并提供翻页操作。在 Vue ,我们可以通过自定义组件的方式来实现分页器。下面是一个简单的分页器组件示例: ```vue <template> <div class="pagination"> <button :disabled="currentPage === 1" @click="prevPage">上一页</button> <span class="page-num">{{ currentPage }} / {{ totalPages }}</span> <button :disabled="currentPage === totalPages" @click="nextPage">下一页</button> </div> </template> <script> export default { props: { currentPage: { type: Number, required: true }, totalPages: { type: Number, required: true } }, methods: { prevPage() { if (this.currentPage > 1) { this.$emit('page-change', this.currentPage - 1); } }, nextPage() { if (this.currentPage < this.totalPages) { this.$emit('page-change', this.currentPage + 1); } } } } </script> <style scoped> .pagination { display: flex; justify-content: center; align-items: center; margin-top: 20px; } button { margin: 0 10px; padding: 5px 10px; border-radius: 5px; border: none; background-color: #007aff; color: #fff; cursor: pointer; } button:disabled { opacity: 0.5; cursor: not-allowed; } .page-num { font-size: 16px; font-weight: bold; margin: 0 10px; } </style> ``` 在这个示例,我们定义了两个 props:currentPage 和 totalPages,分别表示当前页和总页数。组件包含上一页、下一页按钮和页码信息。通过点击按钮来触发 page-change 事件,从而更新父组件的 currentPage 值,实现翻页操作。 使用该组件时,只需在父组件传入 currentPage 和 totalPages 值,并监听 page-change 事件即可: ```vue <template> <div> <div v-for="item in items">{{ item }}</div> <pagination :current-page="currentPage" :total-pages="totalPages" @page-change="handlePageChange" /> </div> </template> <script> import Pagination from './Pagination.vue'; export default { components: { Pagination }, data() { return { items: ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10'], currentPage: 1, totalPages: 2 } }, methods: { handlePageChange(page) { this.currentPage = page; } } } </script> ``` 这里只是一个简单的分页器示例,实际开发还可以根据需求进行扩展,例如添加页码输入框、每页显示条数控制等。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值