如何在项目中用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…

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…

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;…

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…

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. 为什么要模拟实现&…

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…

如何确保爬取的数据准确性和完整性?

在数据驱动的业务环境中&#xff0c;爬虫程序的准确性和完整性至关重要。本文将探讨如何使用Java编写爬虫程序&#xff0c;并确保其在爬取数据时的准确性和完整性。 1. 精确的HTML解析 确保数据准确性的第一步是精确地解析HTML。Jsoup是Java中常用的HTML解析库&#xff0c;它提…

关于Web Component

2024年8月14日 引言 Web Component 是一种用于构建可复用用户界面组件的技术&#xff0c;开发者可以创建自定义的 HTML 标签&#xff0c;并将其封装为包含逻辑和样式的独立组件&#xff0c;从而在任何 Web 应用中重复使用&#xff0c;并且可以做到无框架跨框架。 不同于 Vue…

【MySql】实验十六 综合练习:图书管理系统数据库结构

文章目录 创建图书管理系统数据库结构一、创建数据表1.1 book表1.2 reader表1.3 borrow表 二、插入示例数据2.1 向book表插入数据2.2 向reader表插入数据2.3 向borrow表插入数据 三、查询操作3.1 根据语义为借书表borrow的bno列和 rno列建立外键3.2 查询张小海编写的“数据库原…

AutoDL部署视觉大模型llama3.2-vision,从视频中寻找特定目标

注&#xff1a; windows11系统。示例为此项目&#xff1a;https://github.com/win4r/VideoFinder-Llama3.2-vision-Ollama 在当今的人工智能领域&#xff0c;深度学习模型的计算需求日益增长&#xff0c;特别是在处理复杂的视觉任务时&#xff0c;强大的算力往往是实现高效应用…

SHELL笔记(条件测试)

基本概念&#xff1a; 条件测试用于在 Shell 脚本中对各种条件进行判断&#xff0c;根据判断结果来决定是否执行特定的命令或代码块。条件测试可以用于比较数值、字符串&#xff0c;检查文件或目录的属性&#xff0c;以及判断命令的执行结果等。 格式&#xff1a; 格式1&…

JDK、MAVEN与IDEA的安装与配置

1.认识JDK、MAVEN与IDEA JDK 提供了编译和运行Java程序的基本环境。Maven 帮助管理项目的构建和依赖。IDEA 提供了一个强大的开发环境&#xff0c;使得编写、调试和运行Java程序更加高效。 2. 安装与环境配置 2.1 官网地址 选择你需要的版本下载&#xff1a; MAVEN下载传送…

微信小程序-prettier 格式化

一.安装prettier插件 二.配置开发者工具的设置 配置如下代码在setting.json里&#xff1a; "editor.formatOnSave": true,"editor.defaultFormatter": "esbenp.prettier-vscode","prettier.documentSelectors": ["**/*.wxml"…