elment ui分页功能

最新推荐文章于 2024-12-02 21:08:30 发布

原创最新推荐文章于 2024-12-02 21:08:30 发布 · 156 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

51 篇文章

订阅专栏

本文介绍了一个使用 Element UI 分页组件的示例配置方法，展示了如何通过调整每页显示的条目数量和当前页数来更新数据列表。此配置适用于基于 Vue.js 的前端应用。

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


    <!-- 分页器 -->
        <div class="paginations">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.pageNum"
            :page-size="queryParams.pageSize"
            :total="total"
            :page-sizes="[1, 5, 10, 20]"
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>

  queryParams: {
        pageNum: 1,
        pageSize:10
      },
    total: 100,

  // 条数改变触发的函数
    handleSizeChange(val) {
      // 重新给条数赋值
        this.queryParams.pageSize = val;
          this.getList();
    },
    // 页数改变触发的函数
    handleCurrentChange(val) {
      // 重新赋值
        this.queryParams.pageNum = val;
          this.getList();
    },