如何在项目中用elementui实现分页器功能

1.在结构部分复制官网代码:

  1. <template> 标签:

    • 这是 Vue 模板的根标签,包含所有的 HTML 元素和 Vue 组件。
  2. <div> 标签:

    • 这是一个普通的 HTML 元素,包裹了 el-pagination 组件。它没有特别的意义,只是为了确保 el-pagination 组件在模板中有合适的父元素。
  3. <el-pagination> 标签:

    • 这是 Element UI 库中的一个组件,用于创建分页器。

    • 以下是对各个属性的解释:

    • background:

      • 这个属性用于给分页器的按钮添加背景色。如果设置为 true,按钮会有背景色。
    • layout="prev, pager, next":

      • layout 属性定义了分页器的布局。这里指定了三个部分:
        • prev: 表示"上一页"按钮。
        • pager: 表示中间的页码选择部分。
        • next: 表示"下一页"按钮。
    • :current-page="pageNo":

      • current-page 绑定了一个名为 pageNo 的变量,表示当前选中的页码。: 是 Vue.js 的绑定语法,表示这是一个动态绑定的值。
    • :total="total":

      • total 绑定了一个名为 total 的变量,表示总的数据条数。分页器会根据这个值自动计算总页数。
    • :page-size="pageSize":

      • page-size 绑定了一个名为 pageSize 的变量,表示每页显示的数据条数。
    • :pager-count="7":

      • pager-count 表示页码选择器中最多显示多少个页码按钮。在这里,最多显示 7 个页码按钮。
    • @current-change="$emit('getPageNo', $event)":

      • 这是一个事件监听器,当用户切换页码时(即 current-change 事件被触发),会执行 $emit('getPageNo', $event)。这里 $emit 是 Vue.js 中用于触发自定义事件的方法。$event 是 Vue.js 提供的一个特殊变量,表示事件触发时传递的参数,即用户选择的页码

2.在需要用到分页器的组件编辑参数:

  1. :pageNo="searchParams.pageNo":

    • pageNo 是传递给 Pagination 组件的一个属性,表示当前页码。
    • searchParams.pageNo 是一个对象属性,表示当前搜索参数中的页码。
  2. :pageSize="searchParams.pageSize":

    • pageSize 是传递给 Pagination 组件的一个属性,表示每页显示的数据条数。
    • searchParams.pageSize 是一个对象属性,表示当前搜索参数中的每页数据条数。
  3. :total="total":

    • total 是传递给 Pagination 组件的一个属性,表示总的数据条数。
    • total 是一个变量,表示总的数据条数。
  4. :continues="5":

    • continues 是传递给 Pagination 组件的一个属性,表示分页器中连续显示的页码数量。
    • 5 表示在分页器中会显示连续的 5 个页码按钮。
  5. @getPageNo="getPageNo":

    • @getPageNo 是监听 Pagination 组件触发的 getPageNo 事件。
    • getPageNo 是一个方法,表示当 Pagination 组件触发 getPageNo 事件时,会调用 getPageNo 方法来处理事件。

3.在分页器组件接收参数

4.在需要用到分页器的组件设置初始参数:

5.在需要用到分页器的组件像服务器发请求(实现按钮和页面跳转的绑定)

最后,可以看见效果:

相关推荐
WEI_Gaot4 分钟前
React 19 Props 和 react-icons 和 事件处理函数
前端·react.js
10年前端老司机4 分钟前
微信小程序模板语法和事件
前端·javascript·微信小程序
龙在天4 分钟前
Promise.withResolvers() vs 传统 Promise:谁更胜一筹?
前端
xinhong5 分钟前
Vue3 学习笔记
前端
Evenknow5 分钟前
将"修改源码"改为更专业的"二次开发",体现技术深度
前端·github
khalil6 分钟前
浅析TS枚举与位运算的结合
前端·typescript
yanglei6 分钟前
electron-updater 核心源码解析
前端
攻城狮的大师兄6 分钟前
红宝书(第四版)通读之查漏补缺
javascript
神仙别闹8 分钟前
基于Java+MySQL 实现(Web)日程管理系统
java·前端·mysql
布列瑟农的星空11 分钟前
webworker 实践:外部依赖引入和打包问题
前端·低代码