Element分页器Pagination,查询后自动回第一页

本文介绍 Element UI 中分页组件的使用方法,包括事件触发、属性设置等关键信息,并提供了一个具体的示例来展示如何通过分页组件进行数据展示控制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[100, 200, 300, 400]"
  :page-size="100"
  :hide-on-single-page="true"
  layout="total, sizes, prev, pager, next, jumper"
  :total="400">
</el-pagination>
事件名称及属性说明
size-changepageSize 改变时会触发
current-changecurrentPage 改变时会触发
current-page当前页数
page-size每页显示条目个数
total总条目数
hide-on-single-page只有一页时是否隐藏
  methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      // 查询
      handleSearch() {
       // 调接口内容
        api...
       // 将页码重置到第一页
       this.currentPage = 1
      }
    },
### Element Plus 分页器组件使用指南 #### 组件介绍 `ElPagination` 是用于处理大量数据分页展示的基础组件。该组件支持多种属性配置来满足不同场景下的需求[^1]。 #### 属性说明 - `total`: 总条目数,必填项。 - `page-size`: 每页显示多少条记录,默认值为 10。 - `current-page`: 当前页面索引,默认是从第一页开始计数即 1。 - `layout`: 布局控制参数,可以设置为 `"prev, pager, next"` 来只显示前后翻页按钮以及页码列表;也可以加入其他选项如 `"sizes", "jumper"` 等实现更多功能。 - `background`: 是否带有背景颜色,默认不带(`false`)。 #### 方法调用 通过监听事件可获取用户的交互行为并作出响应: - `size-change`: 页面大小改变时触发。 - `current-change`: 当前页发生变动时触发。 #### 示例代码 下面是一个简单的例子展示了如何创建一个具有基本功能的分页栏: ```html <template> <div class="block"> <el-pagination :total="50" layout="prev, pager, next" @current-change="handleCurrentChange" /> </div> </template> <script setup lang="ts"> import { ref } from 'vue' const currentPage = ref(1) function handleCurrentChange(val: number) { console.log(`当前页: ${val}`) } </script> ``` 此段代码实现了当点击不同的页码链接或者上下箭头换到新页面的时候,在浏览器开发者工具中的console面板打印出新的页号信息。 #### 进阶应用实例 如果想要提供更灵活的选择给用户,则可以在布局里增加一些额外的功能模块: ```html <template> <div class="block"> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="400" > </el-pagination> </div> </template> <script setup lang="ts"> import { ref } from 'vue' const pageSize = ref<number>(10); const currentPage = ref<number>(1); // 处理每页数量变化逻辑... function handleSizeChange(newPageSize:number){ console.log('每页:', newPageSize,'条'); } // ...其余同上 </script> ``` 上述案例中不仅包含了基础版本所拥有的特性外还加入了调整单次加载量(`page-sizes`)、跳转指定位置等功能,并且启用了样式化后的外观效果(设置了`background=true`)。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值