【vue3】解决scope.row.id套标签太多无法随着点击按钮而变化

news2024/11/24 18:29:31

 

 

        实现要求:再点击每一行的修改按钮时,动态拿取该行的id传给后端作为pk(主键)实现数据库数据的修改,并显示在vue前端;

        我遇到的问题:2处使用 scope 作用域插槽拿取每一行的数据,在3处,删除按钮那一行代码,点击每一行的删除按钮的时候都可以拿到该行的id,传输给deleteData()函数然后调用后端接口操作数据库,成功删除该行数据,但在4处时,不管点击那一行的保存按钮都只能拿到最后一行数据的id号,初步判断是4处的scope.row.id套的标签太多了,导致调用时有问题;

现解决思路如下:

  1. 在点击修改按钮时,将该行的id通过触发函数临时保存下来
  2. 点击保存按钮时,将上一步临时保存的id取出来,赋给4处的savePermissions()函数

①触发函数临时保存id

② 在data () {return { }} 里注册变量

③在methods编写函数保存下来

 ④在点击保存按钮触发的函数中,调用该变量,传给后端

 ⑤后端拿到前端返回的数据,调用时发现id跟随变化

 ⑥为了严谨一点,在点击取消按钮时,将该id置空

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

BGP小综合

实验要求及拓扑 一、思路 1.使用OSPF使R2-R7之间可通。 2.各自宣告AS区域,两个区域两两之间建邻,AS2两个小区域之间建联邦(R2与R5、R4与R7)。 3.使R3、R6为路由反射器 RR反射器选取各小区域的路由器作为客户端 、非客户端 4.优…

分布式事务模式理论详解

🚀 分布式事务 🚀 🌲 AI工具、AI绘图、AI专栏 🍀 🌲 如果你想学到最前沿、最火爆的技术,赶快加入吧✨ 🌲 作者简介:硕风和炜,CSDN-Java领域优质创作者🏆&…

SaaS,PaaS,IaaS之间的主要区别

SaaS,PaaS,IaaS之间的主要区别 不久之前,公司的所有IT系统都是本地部署,而云也只是天空中蓬松的白色物体。现在,几乎所有系统和进程都可以使用云平台。SaaS,PaaS和IaaS只是描述如何在企业中使用云的三种方…

DL_20无线串口模块

今日介绍一块最近入手的无线串口模块,40r左右,精简好用,虽然感觉配置波特率啥的并不智能化,但250米的通信距离还是很顶的!它的升级版甚至有1000米的通信距离(空旷地带) 这篇文章不多讲其余话&am…

(二)结构型模式:1、适配器模式(Adapter Pattern)(C++实现示例)

目录 1、适配器模式(Adapter Pattern)含义 2、适配器模式应用场景 3、适配器模式的UML图学习 4、C实现适配器模式的示例 1、适配器模式(Adapter Pattern)含义 将一个接口转换为客户端所期待的接口,从而使两个接口…

Java基础篇--运算符

目录 算术运算符 赋值运算符 比较运算符 逻辑运算符 条件运算符(?:) instanceof 运算符 Java运算符优先级 在程序中经常出现一些特殊符号,如、-、*、、>等,这些特殊符号称作运算符。运算符用于对数据进行算术运算、赋值…

@RequestHeader使用

RequestHeader 请求头参数的设置 GetMapping("paramTest/requestHeader")public String requestHeaderTest(RequestHeader("name") String name){return name;} 在Postman的Headers中添加请求头参数,不过貌似不能加中文

k8s 滚动更新控制(一)

在传统的应用升级时,通常采用的方式是先停止服务,然后升级部署,最后将新应用启动。这个过程面临一个问题,就是在某段时间内,服务是不可用的,对于用户来说是非常不友好的。而kubernetes滚动更新,…

Java泛型集合简明教程

前言 我们编写一个数组并对数组进行排序,不管是对浮点型数组、整型数组、字符串数组或者是其他任何类型的数组进行排序,我们可以利用方法重载的方式,针对每种类型的数组分别编写一个排序方法,需要为几种类型的数组排序&#xff0…

Java课题笔记~ JSP编程

4.1 JSP基本语法 JSP (全称Java Server Pages) 是由 Sun Microsystems 公司倡导和许多公司参与共同创建的一种使软件开发者可以响应客户端请求,而动态生成 HTML、XML 或其他格式文档的Web网页的技术标准。 JSPHTMLJava JSP的本质是Servlet 访问JSP的时候&#x…

【逗老师的PMP学习笔记】10、项目沟通管理

目录 一、规划沟通管理1、【关键工具】沟通技术2、【关键工具】沟通模型(沟通模式)3、【关键工具】沟通方法4、【关键工具】文化意识5、【关键输出】沟通管理计划 二、管理沟通1、【关键工具】会议管理 三、监督沟通 一、规划沟通管理 规划沟通管理是基于…

光威神策DDR5 6800超频破10GHz,国产良心价高端内存创造历史

前段时间光威把8000MHz的DDR5内存打到了千元以内,但是因为当时AMD平台还不支持,确实是馋哭了很多AMD玩家,这两天AMD总算发布了新版AM5主板固件,AGESA 1.0.0.7B BIOS,让AMD Ryzen 7000系列CPU和主板能够支持8000MHZ以上…

MySQL 中读写分离可能遇到的问题

前言 MySQL 中读写分离是经常用到了的架构了,通过读写分离实现横向扩展的能力,写入和更新操作在源服务器上进行,从服务器中进行数据的读取操作,通过增大从服务器的个数,能够极大的增强数据库的读取能力。 MySQL 中的…

JavaWeb-Servlet服务连接器(一)

目录 1.Servlet生命周期 2.Servlet的配置 3.Servlet的常用方法 4.Servlet体系结构 5.HTTP请求报文 6.HTTP响应报文 1.Servlet生命周期 Servlet(Server Applet)是Java Servlet的简称。其主要的功能是交互式地浏览和修改数据,生成一些动态…

《数据同步-NIFI系列》Nifi配置UpdateAttribute实现字符串时间戳转日期

Nifi配置UpdateAttribute实现字符串时间戳转日期 数据处理流程如下:查询源数据库,将Avro转为Json格式,然后使用EvaluateJsonPath修改字段名,最后使用replaceText将参数组成SQL,最后PutSQL。 一、字段串时间戳导致无法插…

章节5:脚本注入网页-XSS

章节5:脚本注入网页-XSS XSS :Cross Site Script 恶意攻击者利用web页面的漏洞,插入一些恶意代码,当用户访问页面的时候,代码就会执行,这个时候就达到了攻击的目的。 JavaScript、Java、VBScript、Activ…

web-js

<html><head><title>基本语法</title></head><body><script>// window.alert("js");// document.write("js");// console.log("js");// function add(a,b){// return ab;// }var result functio…

Linux基础与应用开发系列九:各类系统函数

open_close函数 OPEN函数 头文件&#xff1a; #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> 函数原型&#xff1a; 当文件存在时 int open(const char* pathname,int flags) 当文件不存在时 int open (const char* pathname,int f…

解决“先commit再pull”造成的git冲突

一、问题场景 在分支上修改了代码然后commit&#xff08;没有push&#xff09;&#xff0c;此时再git pull&#xff0c;拉下了别人的修改&#xff0c;但是报错无法merge 二、解决步骤 1.在idea下方工具栏选择git -> log&#xff0c;可以看到版本变化链表&#xff0c;右键…

day17 enum abstract interface 枚举 抽象 接口

一、枚举 enum 枚举本来的面目 创建Season类&#xff0c; 所有类都默认继承Object&#xff0c;写不写都一样 声明属性 &#xff1a;季节的名字、 季节的描述&#xff0c; 因为枚举的对象是看的见的客观事物&#xff0c; 想让它的属性不可修改 使用 final修饰表示最终的 &am…