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

news2024/11/20 20:29:56

遇到的问题

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

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

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

解决问题

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

原理

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

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

更多可以移步于博客:

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

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

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

相关文章

python二级例题

请编写程序,生成随机密码。具体要求如下:‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‮‬ (1)使用 rand…

XSS漏洞及分析

目录 1.什么是xss漏洞 1)存储型XSS漏洞 2)反射型XSS漏洞 3)DOM型XSS漏洞 2.什么是domcobble破环 3.案例一 1)例题链接 2)代码展示 3)例题分析 4.案例二 1)例题链接 2)代…

jvm-堆

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

Linux gdb调式的原理

文章目录 一、原理分析二、dmoe测试2.1 hello.s2.2 demo演示 参考资料 一、原理分析 #include <sys/ptrace.h> #include <sys/types.h> #include <sys/wait.h> #include <unistd.h> #include <stdio.h> #include <stdlib.h> #include <…

使用VBA快速比对数据

实例需求&#xff1a;第一行是全系列数据集合&#xff0c;现在需要对比第一行数据&#xff0c;查找第2行数据中缺失的数字&#xff0c;保存在第3行中。 具备VBA初步使用经验的同学&#xff0c;都可以使用双重循环实现这个需求&#xff0c;这里给大家提供另一种实现思路&#x…

写的一款简易的热点词汇记录工具

项目需要对用户提交的附件、文章、搜索框内容等做热词分析。如下图&#xff1a; 公司有大数据团队。本着不麻烦别人就不麻烦别人的原则&#xff0c;写了一款简易的记录工具&#xff0c;原理也简单&#xff0c;手工在业务插入锚点&#xff0c;用分词器分好词&#xff0c;排掉字…

阿晨的运维笔记 | CentOS部署Docker

使用yum安装 # step 1: 安装必要的一些系统工具 sudo yum install -y yum-utils device-mapper-persistent-data lvm2 # Step 2: 添加软件源信息 sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo # Step 3: 更新并安装 …

使用VBA快速关闭应用程序进程

使用VBA进行开发时&#xff0c;如果需要关闭其他Office应用程序&#xff0c;那么通常可以使用GetObject的方式获取该应用程序的引用&#xff0c;然后再关闭&#xff0c;有时需要重复多次以关闭多进程。如果希望关闭的应用程序并非Office组件&#xff0c;那么GetObject方式有时就…

裸露土方智能识别算法 python

裸露土方智能识别算法通过opencvpython网络模型框架算法&#xff0c;裸露土方智能识别算法能够准确识别现场土堆的裸露情况&#xff0c;并对超过40%部分裸露的土堆进行抓拍预警。此次算法用到的Python是一种由Guido van Rossum开发的通用编程语言&#xff0c;它很快就变得非常流…

NOR型flash vs NAND型flash

FLASH是一种存储芯片&#xff0c;全名叫Flash EEPROM Memory&#xff0c;通过程序可以修改数据&#xff0c;即平时所说的“闪存”。 闪存可以在软件的控制下写入和擦写数据。其存储空间被分割成相对较大的可擦除单元&#xff0c;成为擦除块&#xff08;erase block&#xff09…

嵌入式岗位笔试面试专栏 - 岗位介绍

文章目录 一、嵌入式岗位的分类二、热门领域及公司三、发展前景四、技能要求沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇我们将讲解嵌入岗位的工作职责 。 一、嵌入式岗位的分类 嵌入式软件工程师大致可以分为两种类型: 应用开发工程师驱动开发工程师应用工程…

【炼气境】HashMap原理以及如何使用

系列文章目录 文章目录 系列文章目录前言1、数据结构2、工作原理3、当两个对象的 hashCode 相同会发生什么&#xff1f;4、你知道 hash 的实现吗&#xff1f;为什么要这样实现&#xff1f;5、为什么要用异或运算符&#xff1f;6、HashMap 的 table 的容量如何确定&#xff1f;l…

PHP8内置函数中的变量函数-PHP8知识详解

在php8中&#xff0c;与变量相关的内置函数比较多&#xff0c;本文说一些比较重要的、常见的内置函数。今日着重讲解了5个&#xff0c;分别是&#xff1a;检测变量是否为空的函数empty()、判断变量是否定义过的函数isset()、销毁指定的变量的函数unset()、获取变量的类型的函数…

【力扣周赛】第 359 场周赛(选择区间型DP⭐⭐⭐⭐⭐新题型 双指针)

文章目录 竞赛链接Q1&#xff1a;7004. 判别首字母缩略词&#xff08;模拟&#xff09;Q2&#xff1a;6450. k-avoiding 数组的最小总和解法1——贪心哈希表解法2——数学公式 Q3&#xff1a;7006. 销售利润最大化⭐⭐⭐线性DP相似题目列表2008. 出租车的最大盈利&#xff08;和…

2023.9.1 简单认识 JVM

目录 JVM 内存划分 本地方法栈 虚拟机栈 程序计数器 堆区 元数据区 JVM 类加载机制 加载 验证 准备 解析 初始化 类被加载的几种情况&#xff08;懒汉模式 ---> 只要被用到才会被加载&#xff09; 双亲委派模型 JVM 内存划分 JVM 是一个应用程序&#xff0c;在…

SSM(Spring-Mybatis-SpringMVC)

文章目录 1. 介绍1.1 概念介绍 2 SSM整合框架3. SSM功能模块开发4 测试4.1 业务层接口测试4.2 表现层接口测试 5.优化 -表现层数据封装6.异常处理 1. 介绍 1.1 概念介绍 SSM项目是指基于SpringSpringMVCMyBatis框架搭建的Java Web项目。 Spring是负责管理和组织项目的IOC容器和…

二、C#—第一个c#程序(2)

&#x1f33b;&#x1f33b; 目录 一、编写第一个C#程序1.1 使用Visual Studio创建c#程序的步骤1.2 编写第一个程序“Hello Word”1.3 c#程序的基本结构1.3.1 c#中的命名空间1.3.2 c#中的类1.3.3 c#中的程序启动器——Main方法1.3.4 c#中的标识符1.3.5 c#中的关键字1.3.6 c#中的…

Vavido IP核Independent Clocks Block RAM FIFO简述

文章目录 1 FIFO&#xff08;先入先出&#xff09;1.1 概念1.2 应用场景1.3 FIFO信号1.4 FIFO读写时序1.4.1 FIFO读时序1.4.2 FIFO写时序 参考 1 FIFO&#xff08;先入先出&#xff09; 1.1 概念 FIFO&#xff08;First in First out&#xff09;即先入先出队列&#xff0c;是…

个性化定制界面还是极简版原装界面?我的选择是……

个性化定制界面和极简版原装界面&#xff0c;哪一个你用起来更加顺手呢&#xff0c;相比之下你更喜欢哪一个&#xff1f;来聊一聊原因吧&#xff01; 一、我的观点和选择 个性化定制界面和极简版原装界面&#xff0c;二者各有优缺点。 &#xff08;一&#xff09;极简版原装…

windows vmware17虚拟机导出、导入

我采用的是vmware17版本的虚拟机软件 直接拷贝VM虚拟机文件 导出 查看虚拟机所在路径 复制整个文件夹&#xff0c;可以先压缩介绍文件大小&#xff0c;拷贝到需要还原该虚拟机的电脑上 导入 在目的电脑上需要安装vnware17版本的虚拟机软件 直接打开vmware17&#xff0c; 选…