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

vue +element 删除按钮操作 (删除单个数据 +删除页码处理 )

1.配置接口deleteItemById: "/api/goods/deleteItemById", //删除商品操作
2.get请求接口

//   删除接口  后台给我们 返iddeleteItemById(params){return axios.get(base.deleteItemById,{params})}

3.异步请求接口

async deleteItemById(id){let res = await this.$api.deleteItemById({id})console.log('删除',res.data);}

4.删除完数据,表格数据也要跟着变动主要是这行代码 this.deleteItemById(row,id) 在删除事件里边操作

      handleDelete(index, row) {console.log('删除操作---',index, row);this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.deleteItemById(row,id)}).catch(() => {this.$message({type: 'info',message: '已取消删除'});          });},

5.删除完数据 下边的分页也要处理 在分页事件里边 把val取出来

//   分页  因为val是局部变量 在data初始化一个变量 给val传递过去CurrentChange(val){console.log('分页传过来的',val);this.current = val//把this.Current给删除的重新渲染页this.projectList(val)},

6.传递完了给删除接口拿到页,重新把数据渲染到表格里边

// 删除接口async deleteItemById(id){let res = await this.$api.deleteItemById({id})console.log('删除',res.data);if(res.data.status===200){this.$message({type: 'success',message: '删除成功!'});this.projectList(this.current)}}

7.数据删除了;假如如果当前是最后一页的最后一条数据 删除后 获取上一页的数据 判断 this.total总数目

  // 如果当前是最后一页的最后一条数据 删除后 获取上一页的数据  判断 this.total总数目if(this.total%this.pageSize === 1){this.curent = this.curent -1 > 0? this.current:1;//最好>1}

全部代码

 <el-button size="mini" @click="handleDelete(scope.$index, scope.row)"  type="danger" icon="el-icon-delete">删除</el-button>

删除接口(里边涉及到 删除事件+分页+和重新渲染)

 // 删除接口async deleteItemById(id){let res = await this.$api.deleteItemById({id})console.log('删除',res.data);if(res.data.status===200){this.$message({type: 'success',message: '删除成功!'});// 删除完之后会重新渲染页面// 如果当前是最后一页的最后一条数据 删除后 获取上一页的数据  判断 this.total总数目if(this.total%this.pageSize === 1){this.curent = this.curent -1 > 0? this.current:1;//最好>1}this.projectList(this.current)}}

删除事件

   handleDelete(index, row) {console.log('删除操作---',index, row);this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.deleteItemById(row,id)}).catch(() => {this.$message({type: 'info',message: '已取消删除'});          });},

在删除第3页面数据 的时候,想在第3页看表格数据

 //   分页  因为val是局部变量 在data初始化一个变量 给val传递过去CurrentChange(val){console.log('分页传过来的',val);this.current = val//把this.Current给删除的重新渲染页this.projectList(val)},

data里边初始化

current =1

相关文章:

vue +element 删除按钮操作 (删除单个数据 +删除页码处理 )

1.配置接口deleteItemById: "/api/goods/deleteItemById", //删除商品操作 2.get请求接口 // 删除接口 后台给我们 返iddeleteItemById(params){return axios.get(base.deleteItemById,{params})}3.异步请求接口 async deleteItemById(id){let res await this.…...

更新GitLab上的项目

更新GitLab上的项目 如有需要&#xff0c;请参考这篇&#xff1a;上传项目到gitlab上 1.打开终端&#xff0c;进入到本地项目的根目录。 2.如果你还没有将远程GitLab仓库添加到本地项目&#xff0c;你可以使用以下命令&#xff1a; 比如&#xff1a; git remote add origin …...

K8S群集调度

K8S群集调度 一、调度约束1.概述2.Pod 启动典型创建过程&#xff08;工作机制 &#xff09;3.调度过程4.Predicate 的常见的算法5.常见的优先级选项6.指定调度节点&#xff1a; 二、亲和性1.节点亲和性2.Pod 亲和性3.键值运算关系4.示例5.Pod亲和性与反亲和性6.使用 Pod 反亲和…...

完美解决Echarts X坐标轴下方文字最后一个字体加粗颜色加深的问题

之前用Echarts画图的时候&#xff0c;X坐标轴最后一个字存在自动加粗的问题。也是在网上找过解决办法没有找到&#xff0c;后面自己研究明白了后&#xff0c;在某篇文章下评论了如何解决。但是好像大家没有看评论的习惯&#xff0c;所以单独拿出来一篇文章&#xff0c;希望能给…...

WebGL 计算平行光、环境光下的漫反射光颜色

目录 光照原理 光源类型 平行光 点光源 环境光 反射类型 漫反射 漫反射光颜色 计算公式 环境反射 环境反射光颜色 表面的反射光颜色&#xff08;漫反射和环境反射同时存在时&#xff09;计算公式 平行光下的漫反射 根据光线和法线方向计算入射角θ&#xff08;以便…...

解决SpringMVC在JSP页面取不到ModelAndView中数据

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl 问题描述 ModelAndView携带数据跳转到指定JSP页面后在该页面通过EL表达式取不到原本存放在ModelAndView中的数据。 问题原因 在IDEA中创建Maven工程时web.xml中默认的约束…...

Spring 6.0 新特性

文章目录 Spring的发展历史AOTGraalVMSpringBoot实战AOTRuntimeHints案例分析RuntimeHintsRegistrar SpringBoot中AOT核心代码 Spring的发展历史 AOT Spring 6.0的新特性Ahead of Time&#xff08;AOT&#xff09;编译是一种技术&#xff0c;可以提前将Spring应用程序编译成原…...

计算机竞赛 深度学习+opencv+python实现昆虫识别 -图像识别 昆虫识别

文章目录 0 前言1 课题背景2 具体实现3 数据收集和处理3 卷积神经网络2.1卷积层2.2 池化层2.3 激活函数&#xff1a;2.4 全连接层2.5 使用tensorflow中keras模块实现卷积神经网络 4 MobileNetV2网络5 损失函数softmax 交叉熵5.1 softmax函数5.2 交叉熵损失函数 6 优化器SGD7 学…...

软件过程能力成熟度评估——CSMM认证

CSMM认证又称为“软件过程能力过程成熟度评估”&#xff0c;由中国电子技术标准化研究院联合五十余家产学研用相关方结合我国实际&#xff0c;自主制定的团体标准&#xff0c;于2021年6月8号发布&#xff0c;目的是为了帮助国内软件企业对自身的软件能力进行评估和判断&#xf…...

学内核之二十一:系统调用栈结构分析

目录 一 构建分析环境 二 栈的位置 三 栈开头8字节 四 寄存器环境 五 R4和R5 六 如何确定系统调用的具体函数 一 构建分析环境 为了分析方便&#xff0c;做了如下测试环境&#xff1a; 内核实现一个简单的创建字符设备的驱动 应用层实现一个c程序&#xff0c;操作为打开内…...

互联网3.0 数字原生——数物虚实多维细粒度泛在融合

随着计算机、宽带网、通信技术的飞速发展&#xff0c;互联网技术和软硬件系统也不断演进&#xff0c;催生了一场前所未有的数字化革命。从Web1.0到Web3.0&#xff0c;以及虚拟现实、人工智能和数字孪生等领域的崛起&#xff0c;每一步都勾画出了一个崭新的数字未来&#xff0c;…...

实现AIGC更好的数据存力,这家科技巨头为我们指明了方向

存力即数据存储能力 蕴藏着巨大的发展机会 【全球存储观察 &#xff5c; 热点关注】 2023年&#xff0c;全球被ChatGPT的热潮席卷&#xff0c;拥抱AIGC的创新赛道成为众多企业的新选择。 全球存储观察分析指出&#xff0c;影响AIGC发展的三大因素也日益凸显&#xff0c;即算…...

企业如何在抖音上搞到TOB潜在精准客户流量?

我们都知道&#xff0c;现在互联网上流量都被集中了几个大的平台里。而抖音&#xff0c;一定是绕不开那个&#xff01;图片在公众号&#xff1a;白杨SEO上去看。 抖音&#xff0c;在很多人的传统印象里&#xff0c;还只是一个娱乐短视频APP&#xff0c;用来打发时间而已。事实…...

JeecgBoot v3.5.5 版本发布,性能大升级版本—开源免费的低代码开发平台

项目介绍 JeecgBoot是一款企业级的低代码平台&#xff01;前后端分离架构 SpringBoot2.x&#xff0c;SpringCloud&#xff0c;Ant Design&Vue3&#xff0c;Mybatis-plus&#xff0c;Shiro&#xff0c;JWT 支持微服务。强大的代码生成器让前后端代码一键生成! JeecgBoot引领…...

与树上边权、连通块、二分块相关的问题(抓住各连通块之间的联系,考虑增量):CF444E

https://www.luogu.com.cn/problem/CF444E 首先肯定二分 然后是棵树&#xff0c;所以考虑按顺序枚举边权 然后肯定会有连通块和并查集 考虑现在场上有多个连通块&#xff0c;我们只保留大于 m i d mid mid 的边 则每个连通块都必须往外连边 一个很朴素的思路是判定每个连…...

解决VSCode下载速度很慢

这是VSCode的官网&#xff1a; Visual Studio Code - Code Editing. Redefined 按照官网的下载链接&#xff0c;速度实在是感人&#xff01; 解决办法也很简单&#xff0c;把链接换为CDN加速的链接 把下载链接中的az764295.vo.msecnd.net 替换为&#x1f449; vscode.cdn.azu…...

悬赏算命测算源码可以用二维码收款 可以直接拿来运营

首发悬赏算命测算源码可以用二维码收款 可以直接拿来运营吸金&#xff01;用户可以通过发布悬赏赏金算命&#xff0c;也可以通过升级发布测算任务来吸金 测试环境&#xff1a;php5.6apache2.4mysq5.6 安装教程&#xff1a; 测试环境&#xff1a;php5.6apache2.4mysq5.6 安装&…...

在Linux中安装nginx-1.20.1+php-7.4.28(增加扩展)

NginxPHP安装在公网IP为x.x.x.x的服务器上 需要下载安装的软件版本&#xff1a;nginx-1.20.1php-7.4.28 需要增加的PHP扩展如下&#xff1a; 在编译安装php-7.4.28时加上的pcntl&#xff1b; 单独下载安装的Wxwork_finance_sdk&#xff1b;&#xff08;在编译安装php-7.4.2…...

使用vue-cli搭建SPA项目

一.SPA项目的构建 前提 nodeJS环境已经搭建完毕 node -v npm -v 什么是SPA项目 SPA&#xff08;Single Page Application&#xff09;项目是一种使用单页面架构的Web应用项目。在SPA项目中&#xff0c;整个应用程序只有一个HTML页面&#xff0c;通过动态加载数据和更新DOM来实…...

PLC串口通讯和通讯接口知识汇总

在使用PLC的时候会接触到很多的通讯协议以及通讯接口&#xff0c;最基本的PLC串口通讯和基本的通讯接口你都了解吗&#xff1f; 一、什么是串口通讯&#xff1f; 串口是一种接口标准&#xff0c;是计算机上一种非常通用设备通信的协议。它规定了接口的电气标准&#xff0c;没…...

Vue基础入门---详细简介

一&#xff0c;对Vue的概念 1.1 什么是Vue &#xff1f; 一种流行的JavaScript前端框架&#xff0c;用于构建交互式的Web应用程序。它以简洁、灵活和高效的特性而受到广泛欢迎。Vue采用了一种响应式的数据绑定机制&#xff0c;使得数据的变化能够自动更新相关的DOM元素&#x…...

Qt重写QTreeWidget实现拖拽

介绍 此文章记录QTreeWidget的重写进度&#xff0c;暂时停滞使用&#xff0c;重写了QTreeWidget的拖拽功能&#xff0c;和绘制功能&#xff0c;自定义了数据结构&#xff0c;增加复制&#xff0c;粘贴&#xff0c;删除&#xff0c;准备实现动态刷新数据支持千万数据动态刷新&a…...

【Spring Boot】拦截器学习笔记

一、普通拦截器 1&#xff0c;新建类MyWebConfig实现WebMvcConfigurer&#xff0c;实现addInterceptors方法 Overridepublic void addInterceptors(InterceptorRegistry registry) {registry// 不拦截哪些请求.excludePathPatterns("/login")// 拦截哪些请求.addPat…...

云可观测性:提升云环境中应用程序可靠性

随着云计算的兴起和广泛应用&#xff0c;越来越多的企业将其应用程序和服务迁移到云环境中。在这个高度动态的环境中&#xff0c;确保应用程序的可靠性和可管理性成为了一个迫切的需求。云可观测性作为一种解决方案&#xff0c;针对这一需求提供了有效的方法和工具。本文将介绍…...

免杀对抗-java语言-shellcode免杀-源码修改+打包exe

JAVA-ShellCode免杀-源码修改&打包EXE Shellcode-生成/上线 1.msf生成shellcode 命令&#xff1a;msfvenom -p java/meterpreter/reverse_tcp LHOSTx.x.x.x LPORTxxxx -f jar -o msf.jar 2.msf设置监听 3.执行msf生成的shellcode jar包&#xff0c;成功上线 命令&#xff1…...

抖音、知乎、小红书的流量算法

目前我国网民规模已超过10亿&#xff0c;在这互联网时代&#xff0c;更是流量为王。各个平台里的每个视频、每张图片&#xff0c;背后都有着算法的身影&#xff0c;支配着所有人的流量。作为内容创作者及运营者来说&#xff0c;除了制作高质量的内容以外&#xff0c;也需要掌握…...

c++ 纯虚函数、抽象类

一、 纯虚函数 抽象类 只要有一个纯虚函数&#xff0c;这个类称为抽象类 抽象类的特点 1、无法实例化 2、抽象类的子类&#xff0c;必须要重写父类中的纯虚函数&#xff0c;否者也属于抽象类 例子一 #include <iostream> #include <string.h> using namespa…...

echarts另外存为图片

今天同事画了个Echarts,我看了下居然有下载功能&#xff01;&#xff01;&#xff01;&#xff01;&#xff08;之前一直不知道&#xff09; 这是原图&#xff0c;右上角有个下载功能&#xff0c; 下载后是这样的 貌似是没有了y轴的参数和x轴的参数&#xff0c;估计是可以配置的…...

Mybatis返回自动递增主键值,通过实体

如果你在数据库中使用了自动递增的主键&#xff08;通常是整数类型&#xff09;&#xff0c;你可以使用 MyBatis 来返回插入记录后生成的自动递增的 ID。这里是一个示例&#xff1a; 首先&#xff0c;在你的 SQL 映射文件中&#xff0c;使用 <insert> 元素来执行插入操作…...

如何在 Excel 中求平方根

需要在 Excel 中求一个数字的平方根吗&#xff1f;使用几个内置的 Excel 函数和公式可以轻松计算平方根。在本分步指南中&#xff0c;您将学习在 Excel 中计算平方根的 5 种不同方法&#xff0c;包括使用 SQRT 函数、POWER 函数、指数公式、VBA 代码和 Power Query。跟随教程&a…...

可以做网络攻防的实验的网站/品牌推广的具体方法

Microsoft Office Visio绘画双箭头直线的具体步骤介绍作者:小鑫 来源:PC下载网时间:2019-07-19 15:27:03你们的工作中是不是也离不开Microsoft Office Visio呢?不过你们了解Microsoft Office Visio是怎么绘画双箭头直线吗?以下文章就为你们带来了Microsoft Office Visio绘画双…...

住房和城乡建设委员会官方网站/seo优化是什么

本文档的Copyleft归rosetta所有&#xff0c;使用GPL发布&#xff0c;可以自由拷贝、转载&#xff0c;转载时请保持文档的完整性。参考资料&#xff1a;《Linux设备驱动程序》第3版 LDD3e, LKD3e, 《 Linux per-CPU实现分析 》&#xff0c;linux-2.6.27&#xff0c;irq_balance要…...

安徽建站费用/域名注册查询网站

一台linux 服务器&#xff08;没有光驱&#xff09;出现故障&#xff0c;导致无法进入系统&#xff0c;该怎么办呢&#xff1f; 怎样把里面受损的文件给它替换掉呢&#xff1f; 下面我将要详细的讲一下如何对它进行故障恢复。 &#xff08;一&#xff09; 制作引导U盘。把系统引…...

莱芜受欢迎的网站建设/深圳优化seo排名

元素是文档结构的基础&#xff0c;在CSS中&#xff0c;每个元素生成了一个包含了元素内容的框&#xff08;box&#xff0c;也译为“盒子”&#xff09;。但是不同的元素显示的方式会有所不同&#xff0c;例如<div>和<span>就不同&#xff0c;而<strong>和<…...

wordpress 大神/seo搜索优化 指数

原文链接&#xff1a;http://jalammar.github.io/visual-numpy/创建数组我们可以创建一个NumPy数组(也就是强大的ndarray)&#xff0c;方法是传递一个python列表并使用np.array() 。在本例中&#xff0c;python创建了我们可以在这里看到的数组:通常情况下&#xff0c;我们希望N…...

如何做网站刷题/网站排名软件推荐

简单来说&#xff1a;就是用量子比特代替原来的普通比特。从物理层面上来看&#xff0c;量子计算机不是基于普通的晶体管&#xff0c;而是使用自旋方向受控的粒子(比如质子核磁共振)或者偏振方向受控的光子(学校实验大多用这个)等等作为载体。当然从理论上来看任何一个多能级系…...