如何在项目中用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.在需要用到分页器的组件像服务器发请求(实现按钮和页面跳转的绑定)

最后,可以看见效果:

相关推荐
zwjapple3 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20205 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem6 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊6 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术6 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing6 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止6 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall6 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴7 小时前
简单入门Python装饰器
前端·python
袁煦丞7 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作