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

最新推荐文章于 2024-09-11 18:28:44 发布

卡洛背心

最新推荐文章于 2024-09-11 18:28:44 发布

阅读量4.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Element

本文链接：https://blog.youkuaiyun.com/weixin_42321819/article/details/114371492

Element 专栏收录该内容

15 篇文章

订阅专栏

本文介绍 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-change	pageSize 改变时会触发
current-change	currentPage 改变时会触发
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
      }
    },