当前位置: 首页 > news >正文

Vue中实现分页

1.构造分页组件,并注册为全局组件

<template><div class="pagination"><button v-if="startNumAndEndNum.start>1" @click="$emit('getPageNo',pageNo-1)">上一页</button><button v-if="startNumAndEndNum.start>1" @click="$emit('getPageNo',1)" :class="{active:pageNo==1}">1</button><button v-if="startNumAndEndNum.start>2">···</button><!-- 中间部分 --><template  v-for="(page,index) in startNumAndEndNum.end"><button:key="index" v-if="startNumAndEndNum.start<=page"@click="$emit('getPageNo',page)":class="{active:pageNo==page}"> {{page}}</button></template>  <button v-if="startNumAndEndNum.end<allPage-1">···</button><button v-if="startNumAndEndNum.end<allPage" @click="$emit('getPageNo',allPage)" :class="{active:pageNo==allPage}">{{allPage}}</button><button v-if="startNumAndEndNum.end!=allPage" @click="$emit('getPageNo',pageNo+1)">下一页</button><button style="margin-left: 30px">共 {{total}} 条</button></div></template><script>export default {name: "Page",props:['pageNo','pageSize','total','continues'],computed:{//计算总页数allPage(){//向上取整return Math.ceil(this.total / this.pageSize)},//计算 连续页码 起始数据和结束数据[连续页码至少是5]startNumAndEndNum(){//先定义两个变量存储开始与结束的数字let start=0,end=0;//如果数据不够5页(不正常现象)if(this.allPage<this.continues){start=1,end=this.allPage}else{start=this.pageNo - parseInt(this.continues/2),end=this.pageNo + parseInt(this.continues/2)//当当前页为1时 start为-1 if(start<1){start=1,end=this.continues}//纠正end if(end>this.allPage){end=this.allPage,start=end-this.continues + 1}}return {start,end}}}}</script><style lang="less" scoped>.pagination {text-align: center;button {margin: 0 5px;background-color: #f4f4f5;color: #606266;outline: none;border-radius: 2px;padding: 0 4px;vertical-align: top;display: inline-block;font-size: 13px;min-width: 35.5px;height: 28px;line-height: 28px;cursor: pointer;box-sizing: border-box;text-align: center;border: 0;&[disabled] {color: #c0c4cc;cursor: not-allowed;}&.active {cursor: not-allowed;background-color: #409eff;color: #fff;}}//   button:active {//     color: rgba(235, 217, 55, 0.935);//     border: 1px solid orange;// }.active{background-color: skyblue;}}</style>

2.使用分页组件

<template><div><!-- 分页组件 --><Page :pageNo="params.pageNo" :pageSize="params.pageSize" :total="total" :continues="5"ref="pg"></Page></div>
</template><script>
import {mapState} from "vuex";
export default {name: "Search",data() {return {params: {//分页器参数pageNo: 1,pageSize: 10,},};},mounted() {this.$refs.pg.$on('getPageNo',(pageNo)=>{this.params.pageNo=pageNothis.getSearch(this.params)})},computed: {//获取search模块展示的总数据条数...mapState({total:state=>state.search.searchList.total})},methods: {//向服务器发请求获取search模块数据,根据参数不同返回不同的数据//把这次请求封装成函数,需要时候调用即可getSearch(params) {this.$store.dispatch("SearchInfo", params);},
};
</script><style lang="less" scoped>
</style>

相关文章:

Vue中实现分页

1.构造分页组件&#xff0c;并注册为全局组件 <template><div class"pagination"><button v-if"startNumAndEndNum.start>1" click"$emit(getPageNo,pageNo-1)">上一页</button><button v-if"startNumAndEn…...

vue3 + antv/x6 实现拖拽侧边栏节点到画布

前篇&#xff1a;vue3ts使用antv/x6 自定义节点 前篇&#xff1a;vue3antv x6自定义节点样式 1、创建侧边栏 用antd的menu来做侧边栏 npm i --save ant-design-vue4.x//入口文件main.js内 import Antd from ant-design-vue; import App from ./App; import ant-design-vue/…...

视频云存储/安防监控/视频汇聚EasyCVR平台新增设备经纬度选取

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。音视频流媒体视频平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、…...

CentOS7源码安装MySQL详细教程

&#x1f60a; 作者&#xff1a; Eric &#x1f496; 主页&#xff1a; https://blog.csdn.net/weixin_47316183?typeblog &#x1f389; 主题&#xff1a;CentOS7源码安装MySQL详细教程 ⏱️ 创作时间&#xff1a; 2023年08月014日 文章目录 1、安装的四种方式2、源码安装…...

SpringBoot + Vue 微人事(十二)

职位批量删除实现 编写后端接口 PositionController DeleteMapping("/")public RespBean deletePositionByIds(Integer[] ids){if(positionsService.deletePositionsByIds(ids)ids.length){return RespBean.ok("删除成功");}return RespBean.err("删…...

上半年巴比食品增收不增利,下半年失速的团餐业务能否“复苏”?

随着生活节奏逐渐加快&#xff0c;“宅经济”和“懒人经济”快速融合&#xff0c;人们对进餐便利性的要求逐渐提高&#xff0c;更适用于居家消费的食品应运而生&#xff0c;这其中速冻面点既便于烹饪&#xff0c;又方便快捷&#xff0c;因此其率先出圈获得了消费者青睐&#xf…...

Java基础篇--内部类

在Java中&#xff0c;允许在一个类的内部定义类&#xff0c;这样的类称作内部类&#xff0c;内部类所在的类称作外部类。在实际开发中&#xff0c;根据内部类的位置、修饰符和定义方式的不同&#xff0c;内部类可分为4种&#xff0c;分别是成员内部类、局部内部类、静态内部类、…...

完全备份、增量备份、差异备份、binlog日志

Top NSD DBA DAY06 案例1&#xff1a;完全备份与恢复案例2&#xff1a;增量备份与恢复案例3&#xff1a;差异备份与恢复案例4&#xff1a;binlog日志 1 案例1&#xff1a;完全备份与恢复 1.1 问题 练习物理备份与恢复练习mysqldump备份与恢复 1.2 方案 在数据库服务器192…...

Flutter实现Service + UI 全面跨平台

作者&#xff1a;Karl_wei 前言&#xff1a; Flutter作为跨平台的UI框架&#xff0c;其可行性已经被市场所认可。UI跨端后&#xff0c;我们自然会希望一些运行在终端的小服务也能跨端&#xff0c;特别是当这个小服务还涉及到一些 UI 的展示。 我们希望Flutter能承担这个角色&…...

微软商店的ubuntu 连不上网Temporary failure in name resolution

背景&#xff1a;win10 下载docker时需要wsl2&#xff0c;下了个微软商店的Ubuntu 。写这篇文章的原因是当时查了资料ubuntu的问题和微软下载的Ubuntu还是有一些区别&#xff0c;问题不好解决&#xff0c;故写此文。 问题&#xff1a;用命令ifconfig eth0 down后再执行ifconfi…...

“深入剖析JVM内部工作原理:解密Java虚拟机“

标题&#xff1a;深入剖析JVM内部工作原理&#xff1a;解密Java虚拟机 摘要&#xff1a; 本文将深入剖析Java虚拟机&#xff08;JVM&#xff09;的内部工作原理&#xff0c;包括类加载、运行时数据区、垃圾回收、即时编译等关键概念和机制。通过对JVM的解密&#xff0c;我们将…...

数据结构与算法基础

一、基本概念和术语 &#xff08;一&#xff09;数据元素、数据结构、抽象数据类型等概念 &#xff08;二&#xff09;算法设计的基本要求 &#xff08;三&#xff09;语句的频度和估算时间复杂度 二、线性表 &#xff08;一&#xff09;线性表的定义和基本操作 &#xff08…...

人工智能任务1-【NLP系列】句子嵌入的应用与多模型实现方式

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下人工智能任务1-【NLP系列】句子嵌入的应用与多模型实现方式。句子嵌入是将句子映射到一个固定维度的向量表示形式&#xff0c;它在自然语言处理&#xff08;NLP&#xff09;中有着广泛的应用。通过将句子转化为向量…...

【Java并发编程面试题(60道)】

toc Java并发编程面试题(60道) 基础 1.并行跟并发有什么区别&#xff1f; 从操作系统的角度来看&#xff0c;线程是CPU分配的最小单位。 并行就是同一时刻&#xff0c;两个线程都在执行。这就要求有两个CPU去分别执行两个线程。并发就是同一时刻&#xff0c;只有一个执行&…...

Python:逢七拍腿游戏

场景模拟&#xff1a; 通过在 for 循环中使用 continue 语句实现计算拍腿次数&#xff0c;即计算从1到100&#xff08;不包括100&#xff09;&#xff0c;一共有多少个尾数为7或7的倍数这样的游戏&#xff0c;代码如下&#xff1a; total 99 # 记…...

esp32C3 micropython oled 恐龙快跑游戏

目录 简介 效果展示 源代码 main.py ssd1306.py 实现思路 血量值 分数 恐龙 障碍物 得分与血量值的计算 简介 使用合宙esp32c3模块&#xff0c;基于micropython平台开发的一款oled小游戏&#xff0c;恐龙快跑&#xff0c;所有代码已经给出&#xff0c;将两个py文件…...

53.Linux day03 文件查看命令,vi/vim常用命令

今天进行了新的学习。 目录 1.cat a.查看单个文件的内容&#xff1a; b.查看多个文件的内容&#xff1a; c.将多个文件的内容连接并输出到一个新文件&#xff1a; d.显示带有行号的文件内容&#xff1a; 2.more 3.less 4.head 5.tail 6.命令模式 7.插入模式 8.图…...

YOLOv8改进后效果

数据集 自建铁路障碍数据集-包含路障&#xff0c;人等少数标签。其中百分之八十作为训练集&#xff0c;百分之二十作为测试集 第一次部署 版本&#xff1a;YOLOv5 训练50epoch后精度可达0.94 mAP可达0.95.此时未包含任何改进操作 第二次部署 版本&#xff1a;YOLOv8改进版本 首…...

小程序的数据绑定和事件绑定

小程序的数据绑定 1.需要渲染的数据放在index.js中的data里 Page({data: {info:HELLO WORLD,imgSrc:/images/1.jpg,randomNum:Math.random()*10,randomNum1:Math.random().toFixed(2)}, }) 2.在WXML中通过{{}}获取数据 <view>{{info}}</view><image src"{{…...

第四章MyBatis核心配置文件

environments与environment标签 environments主要用来配置环境&#xff0c;属性default表示默认环境&#xff0c;值为environment的idenvironment为具体环境&#xff0c;属性id表示环境唯一标识environments可以有多个environment 加载默认环境 sqlSessionFactory sqlSessi…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...