如何在项目中用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.mzph.cn/web/59976.shtml

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

相关文章

Linux安装Nginx和Nginx基础配置

下载Nginx 方式一&#xff1a;通过官网下载后上传 通过官网下载安装包。下载地址https://nginx.org/en/download.html 这里选择稳定版的进行下载。 这里使用FinalShell终端工具操作&#xff0c;使用其他工具操作亦可。FinalShell工具下载地址&#xff1a;http://www.hostbuf…

Graph returned an error: An unknown error 的错误如何处理

文章来源&#xff1a;Graph returned an error: An unknown error 的错误如何处理 - 出海打渔 这个错误通常说5分钟内能重试成功就能成功&#xff0c; 一直失败的话&#xff0c;通常是投的application设置异常&#xff0c; 也有可能fb meta他们正在发版&#xff0c;marketing …

Ubuntu20.04从零安装IsaacSim/IsaacLab

Ubuntu20.04从零安装IsaacSim/IsaacLab 电脑硬件配置&#xff1a;安装Isaac sim方案一&#xff1a;pip安装方案二&#xff1a;预构建二进制文件安装1、安装ominiverse2、在ominiverse中安装isaac sim&#xff0c;下载最新的4.2版本 安装Isaac Lab1、IsaacLab环境克隆2、创建con…

Hashing

7-7 Hashing 分数 25 全屏浏览 切换布局 作者 陈越 单位 浙江大学 The task of this problem is simple: insert a sequence of distinct positive integers into a hash table, and output the positions of the input numbers. The hash function is defined to be H(key)…

C++ STL知识点100问

1问&#xff1a;STL有哪几类&#xff0c;对其进行简单描述 答&#xff1a;STL 主要由适配器 allocator&#xff0c;容器 container&#xff0c;算法 algorithm,迭代器 iterator 和仿函数 functor5大类构成。 适配器allocator&#xff1a;STL 提供了三个容器适配器&#xff1a;…

基于Java Springboot宠物猫售卖管理系统

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

【网络安全】SSL(一):为什么需要 Keyless SSL?

未经许可,不得转载。 文章目录 背景正文背景 随着网站和应用程序向云端迁移,使用 HTTPS(SSL/TLS)加密流量已成为行业标准。然而,传统的 HTTPS 配置要求服务器持有网站的私钥,这在云计算环境中引发了一系列安全性和合规性问题。一旦云服务器遭到攻击,私钥泄露可能带来不…

python处理单元格语句去重

Python处理单元格内连续出现的重复词语 1. 环境配置 导入必要的库 import pandas as pd # 数据处理库 import re # 正则表达式库 import jieba # 中文分词库2. 处理字符串 检查输入有效性‌ &#xff1a;如果输入是 NaN、None 或非字符串类型&#xff0c;则直接返回输入。…

Linux—ln(link files)命令使用方法(How to create links on Linux)

Linux—ln&#xff08;link files&#xff09;命令使用方法 在 Linux 系统中工作时&#xff0c;需要在不同的目录中使用相同的文件时&#xff0c;不必在每个目录下都复制一份文件&#xff0c;这样不仅浪费磁盘空间&#xff0c;还会导致文件管理上的混乱。 ln(link files) 便是…

RecyclerView详解——(四)缓存复用机制

稍微看了下源码和部分文章&#xff0c;在此做个小小的总结 RecyclerView&#xff0c;意思为可回收的view&#xff0c;那么相对于listview&#xff0c;他的缓存复用肯定是一大优化。 具体而言&#xff0c;当一个列表项被移出屏幕后&#xff0c;RecyclerView并不会销毁其视图&a…

Elasticsearch面试内容整理-核心概念与数据模型

在 Elasticsearch 中,理解核心概念与数据模型是非常重要的,因为它们定义了数据如何被组织、存储和搜索。以下是 Elasticsearch 的核心概念和数据模型的详细介绍。 核心概念 集群(Cluster) ● 集群是由一个或多个节点组成的,用于共同存储和搜索数据的集合。

vulhub之log4j

Apache Log4j Server 反序列化命令执行漏洞(CVE-2017-5645) 漏洞简介 Apache Log4j是一个用于Java的日志记录库,其支持启动远程日志服务器。Apache Log4j 2.8.2之前的2.x版本中存在安全漏洞。攻击者可利用该漏洞执行任意代码。 Apache Log4j 在应用程序中添加日志记录最…

(附项目源码)Java开发语言,215 springboot 大学生爱心互助代购网站,计算机毕设程序开发+文案(LW+PPT)

摘 要 在网络信息的时代&#xff0c;众多的软件被开发出来&#xff0c;给用户带来了很大的选择余地&#xff0c;而且人们越来越追求更个性的需求。在这种时代背景下&#xff0c;企业只能以用户为导向&#xff0c;按品种分类规划&#xff0c;以产品的持续创新作为企业最重要的竞…

IDEA旗舰版编辑器器快速⼊门(笔记)

简介&#xff1a;javaweb开发必备软件之IDEA期间版介绍 DEA编辑器器版本介绍 官⽹网&#xff1a;https://www.jetbrains.com/地址&#xff1a;https://www.jetbrains.com/idea/download/#sectionmac DEA 分社区版(Community) 和 旗舰版(Ultimate)&#xff0c;我们做JavaWeb开…

【C++之STL】摸清 string 的模拟实现(上)

文章目录 1. 为什么要模拟实现&#xff1f;2. 基本框架搭建3. 构造函数3. 1 默认构造/from c_str3. 2 拷贝构造3. 2. 1 深浅拷贝 3. 3 fill3. 4 迭代器区间构造 4. 容量操作4. 1 size()和capacity()和empty()4. 2 clear()4. 3 resize()4. 4 reserve() 1. 为什么要模拟实现&…

VSCode 常用的快捷键

Visual Studio Code (VSCode) 提供了丰富的快捷键来提高开发效率。 是常用的 VSCode 快捷键&#xff0c;按功能分类&#xff1a; 1. 基础编辑 Ctrl C / Ctrl V / Ctrl X&#xff1a;复制、粘贴、剪切当前选中的文本。Ctrl Z / Ctrl Y&#xff1a;撤销和重做操作。Ctrl …

【Java 集合】Collections 空列表细节处理

问题 如下代码&#xff0c;虽然定义为非空 NonNull&#xff0c;但依然会返回空对象&#xff0c;导致调用侧被检测为空引用。 实际上不是Collections的问题是三目运算符返回了null对象。 import java.util.Collections;NonNullprivate List<String> getInfo() {IccReco…

Docker: ubuntu系统下Docker的安装

安装依赖 操作系统版本 Ubuntu Kinetic 22.10Ubuntu Jammy 24.04 (LTS)Ubuntu Jammy 22.04 (LTS)Ubuntu Focal 20.04 (LTS)Ubuntu Bionic 18.04 (LTS) CPU架构支持 ARMx86_64 查看我们的系统版本信息 uname -a通过该命令查得cpu架构是x86_64的&#xff1b; cat /etc/*re…

vue2+3 —— Day5/6

自定义指令 自定义指令 需求&#xff1a;当页面加载时&#xff0c;让元素获取焦点&#xff08;一进页面&#xff0c;输入框就获取焦点&#xff09; 常规操作&#xff1a;操作dom “dom元素.focus()” 获取dom元素还要用ref 和 $refs <input ref"inp" type&quo…

链表续-8种链表(数据结构)

了解链表 由于之前已经有一篇文章介绍链表&#xff0c;本次直接上八种链表的代码 具体前一篇文章阅读此处&#xff1a;链表介绍 八种链表代码 单向链表 节点当中存放数据以及指向下一个节点的指针 代码&#xff1a; #define _CRT_SECURE_NO_WARINGS 1#include <stdio.h>…