​​ 翻页 上一页/下一页

data里面定义 

currentPage: 0   // 当前页数

 created

初始化时赋值  this.formProps 是表格 要求是对象
this.contractArr 是传过来要进行分页的数组对象 初始化显示第一个created() {this.formProps = this.contractArr[0]}

 html页面

<div><div>// 左箭头<span v-if="currentPage > 0" @click="prevPage"> 还有上一页<img src="@/assets/home/left_one.svg" alt=""></span><span v-else @click="prevPage">   没有上一页<img src="@/assets/home/left_two.svg" alt=""></span></div><div>// 右箭头<span v-if="currentPage < contractArr.length-1" @click="nextPage">  还有下一页<img src="@/assets/home/right_one.svg" alt=""></span><span v-else @click="nextPage">   没有下一页<img src="@/assets/home/right_two.svg" alt=""></span></div>
</div>

js

进行翻页的时候 page--或者++ ...是浅拷贝 
上一页prevPage() {if (this.currentPage > 0) {this.currentPage--this.formProps = {...this.contractArr[this.currentPage]}}else{this.$message({message: '没有上一页了',type: 'warning'});}
},
下一页
nextPage() {if (this.currentPage < this.contractArr.length-1) {this.currentPage++this.formProps = {...this.contractArr[this.currentPage]}}else{this.$message({message: '没有下一页了',type: 'warning'});}
},
watch: {监听 formProps 的变化 当他改变的时候就说明这个表格被填写了 formProps: {handler:function(newval, oldval) {if(newval){let index = this.contractArr.findIndex(i => i.id == newval.id)if(index != -1){this.contractArr.splice(index, 1, newval)将这个新值对象替换之前的旧值对象这样就拿到了新修改的值和其他未修改的值 直到全部赋值成新值}}},deep: true},这个是因为拿过来的值 包含小数点 所以进行监听去除小数点'formProps.quality':{handler:function(newval, oldval) {this.formProps.quality = Number(this.formProps.quality)},deep: true},'formProps.speed':{handler:function(newval, oldval) {this.formProps.speed = Number(this.formProps.speed)},deep: true},'formProps.service':{handler:function(newval, oldval) {this.formProps.service = Number(this.formProps.service)},deep: true},},
最后可以使用 every 进行判断若有一个不满足条件,则返回false,后面的元素都不会再执行。不会对空数组进行检测,不会改变原始数组这样就可以知道哪些数据没有填

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

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

相关文章

SpringSecurity 三更草堂学习笔记

0.简介 Spring Security是Spring家族中的一个安全管理框架。相比与另外一个安全框架Shiro&#xff0c;它提供了更丰富的功能&#xff0c;社区资源也比Shiro丰富。 一般来说中大型的项目都是使用SpringSecurity来做安全框架。小项目有Shiro的比较多&#xff0c;因为相比与Spring…

Retrofit框架源码深度剖析【Android热门框架分析第二弹】

Android热门框架解析&#xff0c;你确定不来看看吗&#xff1f; OkHttp框架源码深度剖析【Android热门框架分析第一弹】 Retrofit框架源码深度剖析【Android热门框架分析第二弹】 什么是Retrofit&#xff1f; 准确来说&#xff0c;Retrofit 是一个 RESTful 的 HTTP 网络请求…

【代码随想录】【算法训练营】【第59天】 [卡码110]字符串接龙 [卡码105]有向图的完全可达性 [卡码106]岛屿的周长

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 卡码网。 day 59&#xff0c;周五&#xff0c;继续ding~ 题目详情 [卡码110] 字符串接龙 题目描述 卡码110 字符串接龙 解题思路 前提&#xff1a; 思路&#xff1a; 重点&#xff1a; 代码实现 C语言 […

LLM大模型从入门到精通(1)--LLM基础知识介绍

1. 大语言模型 (LLM) 背景 2. 语言模型 (Language Model, LM) 1. 大语言模型 (LLM) 背景 大语言模型 (英文&#xff1a;Large Language Model&#xff0c;缩写LLM) 是一种人工智能模型, 旨在理解和生成人类语言. 大语言模型可以处理多种自然语言任务&#xff0c;如文本分类、问…

绝区伍--2024年AI发展路线图

2024 年将是人工智能具有里程碑意义的一年。随着新模式、融资轮次和进步以惊人的速度出现&#xff0c;很难跟上人工智能世界发生的一切。让我们深入了解 2024 年可能定义人工智能的关键事件、产品发布、研究突破和趋势。 2024 年第一季度 2024 年第一季度将推出一些主要车型并…

什么是O2O?线上线下怎么完美结合?

现如今互联网技术飞速发展&#xff0c;智能手机普及。O2O&#xff08;Online To Offline&#xff09;模式已经成为一种新的商业模式&#xff0c;人们的生活和消费习惯也逐渐被改变。经常听到企业提到“O2O”&#xff0c;它究竟是什么呢&#xff1f;对企业有着什么魅力呢&#x…

Flutter Inno Setup 打包 Windows 程序

转载自&#xff1a;flutter桌面应用从开发配置到打包分发 - 掘金 (juejin.cn) 五.打包 1.创建 release 版本的应用 flutter build release 执行完成后&#xff0c; release包位置在项目的build->windows->runer文件夹中 2.应用程序分发 Windows 为 Windows 平台构建…

AE-关键帧

目录 关键帧操作步骤&#xff08;以位置变化为例&#xff09; 1.确定动画起点 2.设置起点的位置属性 3.为起点打上关键帧 4.确定动画终点 5.设置终点的位置属性 改变动画速度 1.选中所有关键帧 2.拖拽 时间反向关键帧 1.选中要反向的关键帧 2.使用时间反向关键帧 …

Apache POI、EasyPoi、EasyExcel

目录 ​编辑 &#xff08;一&#xff09;Apache PoI 使用 &#xff08;二&#xff09;EasyPoi使用 &#xff08;三&#xff09;EasyExcel使用 写 读 最简单的读​ 最简单的读的excel示例​ 最简单的读的对象​ &#xff08;一&#xff09;Apache PoI 使用 &#xff08;二&…

mp4视频太大怎么压缩不影响画质,mp4文件太大怎么变小且清晰度高

在数字化时代&#xff0c;我们常常面临视频文件过大的问题。尤其是mp4格式的视频&#xff0c;文件大小往往令人望而却步。那么&#xff0c;如何在不影响画质的前提下&#xff0c;有效地压缩mp4视频呢&#xff1f;本文将为您揭秘几种简单实用的压缩技巧。 在分享和存储视频时&am…

算法复杂度

目录 1. 数据结构前言 1.1 数据结构 1.2 算法 2. 算法效率 2.1 复杂度的概念 3. 时间复杂度 3.1 大O的渐进表示法 3.2 时间复杂度计算示例: 3.2.1 示例1 3.2.2 示例2 3.2.3 示例3 3.2.4 示例4 3.2.6 示例6 4. 空间复杂度 4.1 空间复杂度计算示例 4.1.1 示例1 …

【Python实战因果推断】18_线性回归的不合理效果8

目录 Saturated Regression Model Regression as Variance Weighted Average Saturated Regression Model 还记得我在本章开头强调回归和条件平均值之间的相似性吗&#xff1f;我向你展示了使用二元干预进行回归与比较干预组和对照组的平均值是完全一样的。现在&#xff0c;由…

Parallels Desktop 19下载及查找我的 Parallels Desktop for Mac 激活密钥

Parallels Desktop 19 for Mac v19.3.0.54924中文破解版是一款适用于Mac的虚拟化软件&#xff0c;parallels desktop 19中文版允许您在Mac计算机上同时运行多个操作系统。它使您能够创建虚拟机并在这些虚拟机中安装不同的操作系统&#xff0c;如Windows、Linux或macOS。使用Par…

electron src build

编译文档&#xff1a; 构建说明 | Electron 1 下载depot_tools &#xff08;1&#xff09;安装depot_tools用于获取 Chromium 及其依赖项的工具集&#xff1a;地址 WINDOWS Download the depot_tools bundle and extract it somewhere. (2)在 Windows 上&#xff0c;您需要…

zdppy+onlyoffice+vue3解决文档加载和文档强制保存时弹出警告的问题

解决过程 第一次排查 最开始排查的是官方文档说的 https://api.onlyoffice.com/editors/troubleshooting#key 解决方案。参考的是官方的 https://github.com/ONLYOFFICE/document-server-integration/releases/latest/download/Python.Example.zip 基于Django的Python代码。 …

葵花奖见证品牌实力 乐橙旗舰智能锁公开首秀引全场热议

7月9日&#xff0c;被誉为智能家居界奥斯卡的2024第八届“葵花奖”于广州建博会广交会展馆A区会议室隆重举行。经过专业评审委员的严格筛选&#xff0c;乐橙荣获“2024智能锁行业消费者喜爱品牌奖”。 作为广州建博会的重要展商之一&#xff0c;乐橙本次携年度高端旗舰新品智能…

CLion学习笔记-cmake编译和多main函数编译

这里就不讲怎么配置clion了 项目名字 pcl_kdtree_search 1.新建一个工程名字自己取&#xff0c;我这里用自己学习pcl的&#xff0c;加一个main函数&#xff0c;这个时候Cmake里边就是这样的。 #声明要求的cmake最低版本 cmake_minimum_required(VERSION 3.19) #声明一个工程…

Python编程学习笔记(3)--- 操作列表

1、遍历列表 遍历列表可以采用for循环的方法&#xff0c;需要对列表中的每一个元素都执行相同的操作。 具体事实如下&#xff1a; name ["ada","cdb","dbc","bad","jinb"] for Name in name:print(Name)运行结果&#x…

企业化运维(7)_Zabbix企业级监控平台

官网&#xff1a;Zabbix :: The Enterprise-Class Open Source Network Monitoring Solution ###1.Zabbix部署### &#xff08;1&#xff09;zabbix安装 安装源 修改安装路径为清华镜像 [rootserver1 zabbix]# cd /etc/yum.repos.d/ [rootserver1 yum.repos.d]# vim zabbix.r…

【Python】基础语法体系:两种常用语句

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️Python】 文章目录 前言条件语句动态实例if语句if-else 语句if-elif-else 语句嵌套条件语句 循环语句for循环while循环 动态实例嵌套循环 前言 Python语句是构成Python程序的基本单元&#xff0c;用…