当前位置: 首页 > 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…...

大数据领域规范性分析:助力企业决策优化

大数据领域规范性分析:助力企业决策优化 关键词:规范性分析、大数据决策、描述性分析、预测性分析、优化算法、企业决策、数据驱动 摘要:在数据爆炸的时代,企业不再满足于“数据记录”或“未来预测”,而是渴望知道“如何行动才能最优”。本文将从大数据分析的三大支柱(描…...

文脉定序在Milvus向量库中的应用:Hybrid Search后重排序增强方案

文脉定序在Milvus向量库中的应用&#xff1a;Hybrid Search后重排序增强方案 在构建智能检索系统时&#xff0c;我们常常遇到一个尴尬的局面&#xff1a;系统能“搜得到”一堆结果&#xff0c;但最相关、最准确的答案却不一定排在最前面。这就像在图书馆里找到了正确的书架&am…...

Qwen3-Embedding-4B开箱即用:SGlang部署避坑指南

Qwen3-Embedding-4B开箱即用&#xff1a;SGlang部署避坑指南 1. Qwen3-Embedding-4B简介 Qwen3-Embedding-4B是Qwen系列最新推出的文本嵌入模型&#xff0c;专为语义检索、文本分类等任务优化。作为4B参数量的中型模型&#xff0c;它在效果与效率之间取得了良好平衡&#xff…...

Source Han Serif CN字体架构解析:从技术实现到设计应用的完整技术栈

Source Han Serif CN字体架构解析&#xff1a;从技术实现到设计应用的完整技术栈 【免费下载链接】source-han-serif-ttf Source Han Serif TTF 项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf 在数字排版的演进历程中&#xff0c;中文字体技术长期…...

罗技鼠标宏:专业级压枪系统构建指南

罗技鼠标宏&#xff1a;专业级压枪系统构建指南 【免费下载链接】logitech-pubg PUBG no recoil script for Logitech gaming mouse / 绝地求生 罗技 鼠标宏 项目地址: https://gitcode.com/gh_mirrors/lo/logitech-pubg 在竞技射击游戏中&#xff0c;精准控制武器后坐力…...

自抗扰顺序模型预测PWM整流器控制的Matlab仿真之旅

自抗扰顺序模型预测PWM整流器控制 matlab仿真&#xff0c;算法用.m文件编写 配套论文及理论推导公式和参数在电力电子领域&#xff0c;PWM整流器的控制一直是研究热点。今天咱就来唠唠自抗扰顺序模型预测&#xff08;ADRC - SMPC&#xff09;对PWM整流器控制的Matlab仿真实现&a…...

普冉PY32F071内存紧张?FreeRTOS配置优化全攻略(含heap_4选择与任务栈设置)

普冉PY32F071内存紧张&#xff1f;FreeRTOS配置优化全攻略&#xff08;含heap_4选择与任务栈设置&#xff09; 当你在PY32F071这颗Cortex-M0芯片上运行FreeRTOS时&#xff0c;是否遇到过任务莫名崩溃、系统运行不稳定的情况&#xff1f;作为一款仅有20KB RAM的微控制器&#xf…...

想转行做产品经理?看看你身上有没有这5个“隐藏技能”

在数字经济飞速发展的当下&#xff0c;产品经理早已不是互联网行业的“专属岗位”&#xff0c;而是横跨互联网、硬件、金融、制造业等多个领域的核心角色——连接用户需求与技术实现&#xff0c;主导产品从创意到落地的全流程&#xff0c;被称为“CEO的学前班”。正因如此&…...

RK3588嵌入式Linux开发实战:uboot任意键中断autoboot功能实现

1. 为什么需要任意键中断autoboot功能 在嵌入式Linux开发中&#xff0c;uboot作为系统启动的"引路人"&#xff0c;承担着硬件初始化、内核加载等重要任务。RK3588这类高性能处理器在启动时&#xff0c;默认会进入autoboot倒计时流程。这个设计本意是好的——当系统正…...

OpenClaw多模型切换指南:Qwen3-32B与其他镜像协同工作

OpenClaw多模型切换指南&#xff1a;Qwen3-32B与其他镜像协同工作 1. 为什么需要多模型切换&#xff1f; 去年冬天&#xff0c;当我第一次尝试用OpenClaw自动化处理公司周报时&#xff0c;发现单一模型很难同时满足"数据分析"和"文案润色"两种需求。Qwen…...