Vue在表格中拿到该行信息的方式(作用域插槽-#default-scope-解决按钮与行点击的顺序问题)

遇到的问题

在做表格的时候,表格是封装好了的,用于展示数据。如果想给单行增加按钮,可以单独写一列存放按钮,最基本的需求是,点击按钮后要拿到数据然后发起请求。

且Vue的element-plus,当我们点击按钮之后会自动触发行点击事件。这本身是一件好的事情,但难搞的地方在于,执行顺序。也就是,==先点击按钮,再拿到数据。==这样的话,每一次点击按钮,拿到的都是上一次的数据。

怎么样才能解决问题?我尝试了很多方法,比如点击按钮后重新加载行点击(这样不行,因为就算是存放了row的数据,点击事件也是上一次的数据),比如Vue的事件修饰符(无法做到这样的修饰),都无法解决。

解决问题

在表格中用到#default: scope:
在这里插入图片描述
就可以拿到表单该行的一些数据。

原理

这里用到了Vue的作用域插槽。

这里复习下作用域插槽的定义:当数据在组件自身,但根据数据生成的结构需要组件使用者来定,我们则可以使用作用域插槽。

更多可以移步于博客:

vue插槽之插槽的用法及作用域插槽详解

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

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

相关文章

向openssl中添加一个最简单的算法

文章目录 一、尝试在sha.c中添加新的函数二、添加自定义算法2.1 添加对应文件2.2 相关配置2.3 编译运行 一、尝试在sha.c中添加新的函数 在尝试添加新算法前,我先尝试在原有的旧算法中添加一个新函数,看是否能被编译并生成对应的动态链接库。 关于open…

艾昆纬携手亚马逊云科技赋能生物医药企业,加速武田数字化转型

IQVIA艾昆纬是全球以及中国医疗健康服务领域的领导者,利用其数据及分析,前沿数字化技术和医疗领域的专业知识,智能连接医疗生态的各个环节。过去几年,IQVIA艾昆纬所服务的生物医药行业客户武田中国也迎来了数字化转型的高潮。 武田…

iOS开发Swift-6-深色模式,类与对象,MVC模式,弹出框,闭包-趣味问答App

1.创建趣味问答App项目 2.创建一个问题文本,水平居中约束。 创建蓝、红两个按钮,放入Stack View中,给StackView水平居中约束,下边约束,设置两按钮间距为20. 设置进度条view与safe View关系为equal width。设置他们的比…

VScode 调试python程序,debug状态闪断问题的解决方法

0. Few words 之前一直在VSCode中debug C和Python的程序没出过闪断的问题,但是最近在另一台电脑上debug,同样的方法,设置launch.json和CMakeList加debug状态等等操作,如我另一篇blog写的一样,可以点这里查看。 但是&a…

jsch网页版ssh

使用依赖 implementation com.jcraft:jsch:0.1.55Server端代码 import com.jcraft.jsch.Channel; import com.jcraft.jsch.JSch; import com.jcraft.jsch.Session; import java.io.InputStream; import java.io.OutputStream; import java.util.concurrent.TimeUnit; import o…

前端面试中Vue的有经典面试题一

1. 谈谈你对MVVM开发模式的理解 MVVM分为Model、View、ViewModel三者。 Model:代表数据模型,数据和业务逻辑都在Model层中定义; View:代表UI视图,负责数据的展示; ViewModel:负责监听Model中…

【【萌新的STM32学习-27--USART异步通信配置步骤】】

萌新的STM32学习-27–USART异步通信配置步骤 USART/UART 异步通信配置步骤 1.配置串口工作参数 HAL_UART_Init() 我们会在此处调用MSP中的回调函数 2.串口底层初始化 用户定义HAL_UART_MspInit() 配置GPIO NVIC CLOCK 等 3.开启串口异步接收中断 HAL_UART_Receive_IT() 4.…

题目有点太简单了,不知道怎么选了

有个公司给了下面一个题目&#xff0c;看了下太简单了&#xff0c;都怕选错了。 后来拿着程序跑了下&#xff0c;就是这个意思嘛。 结论 程序跑出来的结果就是对输入的列表进行倒序排列。 public void testGetPut() throws Exception {List<Integer> numbers List.of(…

Shell - 加固系统配置

文章目录 Shell Script其他方案 Shell Script #! /bin/bash # Function:对账户的密码的一些加固 read -p "设置密码最多可多少天不修改&#xff1a;" A read -p "设置密码修改之间最小的天数&#xff1a;" B read -p "设置密码最短的长度&#xff1a…

ElasticSearch学习4--复杂查询

1、查询分类 查询所有&#xff1a;查询出所有数据&#xff0c;一般测试用。例如&#xff1a;match_all全文检索&#xff08;full text&#xff09;查询&#xff1a;利用分词器对用户输入内容分词&#xff0c;然后去倒排索引库中匹配。例如&#xff1a; match_query 根据单个字段…

保姆级 Keras 实现 Faster R-CNN 十一

保姆级 Keras 实现 Faster R-CNN 十一 一 RoI 区域二. 定义 RoiPoolingLyaer1. call 函数2. compute_output_shape 函数 三. 将 RoiPoolingLayer 加入模型 上一篇 文章中我们实现了 ProposalLyaer 层, 它将的功能是输出建议区域矩形. 本文要实现另一个自定义层 RoiPoolingLayer…

网络安全体系架构介绍

网络安全体系是一项复杂的系统工程&#xff0c;需要把安全组织体系、安全技术体系和安全管理体系等手段进行有机融合&#xff0c;构建一体化的整体安全屏障。针对网络安全防护&#xff0c;美国曾提出多个网络安全体系模型和架构&#xff0c;其中比较经典的包括PDRR模型、P2DR模…

git 查看当前分支最近一次提交的commit SHA

获取当前分支最近一次commit SHA &#xff08;长度为40个16进制数字的字符&#xff09;命令如下&#xff1a; git rev-parse HEAD 获取简写&#xff08;短&#xff09; commit SHA git rev-parse --short HEAD

Acwing 1233. 全球变暖 (每日一题)

如果你觉得这篇题解对你有用&#xff0c;可以点个赞或关注再走呗&#xff0c;谢谢你的关注~ 题目描述 你有一张某海域 NN 像素的照片&#xff0c;”.”表示海洋、”#”表示陆地&#xff0c;如下所示&#xff1a; … .##… .##… …##. …####. …###. … 其中”上下左右”…

时序预测 | MATLAB实现TCN-BiGRU时间卷积双向门控循环单元时间序列预测

时序预测 | MATLAB实现TCN-BiGRU时间卷积双向门控循环单元时间序列预测 目录 时序预测 | MATLAB实现TCN-BiGRU时间卷积双向门控循环单元时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现TCN-BiGRU时间卷积双向门控循环单元时间序列预测&a…

SQLAlchemy 封装的工具类,数据库pgsql(数据库连接池)

1.SQLAlchemy是什么&#xff1f; SQLAlchemy 是 Python 著名的 ORM 工具包。通过 ORM&#xff0c;开发者可以用面向对象的方式来操作数据库&#xff0c;不再需要编写 SQL 语句。 SQLAlchemy 支持多种数据库&#xff0c;除 sqlite 外&#xff0c;其它数据库需要安装第三方驱动。…

element中Notification组件(this.$notify)自定义样式

1、自定义样式效果 2、vue代码 this.notifications this.$notify({title: ,dangerouslyUseHTMLString: true,duration: obj.remindMethod3 ? 0:4500,customClass: notify-warning,offset: 50,showClose: false,message: this.$createElement("div",null,[this.$…

jvm-堆

1.堆的核心概念 一个jvm实例只存在一个堆内存&#xff0c;堆也是java内存管理核心区域 java堆区在jvm启动的时候即被创建&#xff0c;其空间大小就确定了&#xff0c;是jvm管理最大的一块内存空间&#xff1b; 堆可以处于物理上不连续的内存空间&#xff0c;但在逻辑上它应该被…

SpringCloud(十)——ElasticSearch简单了解(二)DSL查询语句及RestClient查询文档

文章目录 1. DSL查询文档1.1 DSL查询分类1.2 全文检索查询1.3 精确查询1.4 地理查询1.5 查询算分1.6 布尔查询1.7 结果排序1.8 分页查询1.9 高亮显示 2. RestClient查询文档2.1 查询全部2.2 其他查询语句2.3 排序和分页2.4 高亮显示 1. DSL查询文档 1.1 DSL查询分类 查询所有…

程序员自由创业周记#8:怎么设计

软件的样子 就像建造房子&#xff0c;工人施工需要照着图纸&#xff0c;没有图纸直接上手施工倒是也可以&#xff0c;只是房子的质量和样子都不敢恭维。程序员在一定意义上与建筑工人很像&#xff0c;只不过他们码砖&#xff0c;我们码码。软件开发之前也需要提前设计好界面&a…