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

遇到的问题

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

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

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

解决问题

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

原理

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

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

更多可以移步于博客:

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

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

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

相关文章

OCR文字检测与识别系统:融合文字检测、文字识别和方向分类器的综合解决方案

1. PP-OCR系统简介与总览 前两章主要介绍了DBNet文字检测算法以及CRNN文字识别算法。然而对于我们实际场景中的一张图像,想要单独基于文字检测或者识别模型,是无法同时获取文字位置与文字内容的,因此,我们将文字检测算法以及文字…

2023最新 Electron.js 桌面应用开发教程(基础篇)更新中

Electron是什么? Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux Electron Fiddle 运行实例 Ele…

价格战“杀疯了”?「智驾」系统级降本增效,才是更优解

从3000元到1500元,再到千元级别,今年以来,行泊一体域控产品不断刷新降本底线。 以上,也反映出今年中国智驾规模量产赛道的竞争激烈程度。当前,各路 Tier1甚至Tier2供应商们还在加速“内卷”,从早期的卷技术…

Spring框架知识点汇总

01.Spring框架的基本理解 关键字:核心思想IOC/AOP,作用(解耦,简化),简单描述框架组成; Spring框架是一款轻量级的开发框架,核心思想是IOC(反转控制)和AOP&a…

【Vue3 知识第二讲】Vue3新特性、vue-devtools 调试工具、脚手架搭建

文章目录 一、Vue3 新特性1.1 重写双向数据绑定1.1.1 Vue2 基于Object.defineProperty() 实现1.1.2 Vue3 基于Proxy 实现 1.2 优化 虚拟DOM1.3 Fragments1.4 Tree shaking1.5 Composition API 二、 vue-devtools 调试工具三、环境配置四、脚手架目录介绍五、SFC 语法规范解析附…

Angular安全专辑之四 —— 避免服务端可能的资源耗尽(NodeJS)

express-rate-limit是一个简单实用的npm包,用于在Express应用程序中实现速率限制。它可以帮助防止DDoS攻击和暴力破解,同时还允许对API端点进行流控。 express-rate-limit及其主要功能 express-rate-limit是Express框架的一个流行中间件,它允许根据IP地址或其他标准轻松地对请求…

面经:微服务

文章目录 参考资料一. 微服务概述1. CAP理论2. BASE理论3. SpringBoot 与 SpringCloud对比 二. 服务注册:Zookeeper,Eureka,Nacos,Consul1. Nacos两种健康检查方式?2. nacos中负责负载均衡底层是如何实现的3. Nacos原理4. 临时实例和持久化(非临时)实例 …

考虑储能电池参与一次调频技术经济模型的容量配置方法(matlab代码)

目录 1 主要内容 储能参与调频原理 储能参与一次调频的充放电策略 2 部分代码 3 程序结果 4 下载链接 1 主要内容 该程序复现文献《考虑储能电池参与一次调频技术经济模型的容量配置方法》模型,以调频效果最优为目标,考虑储能参与一次调频的充放电…

2023年信息安全管理与评估(赛项)评分标准第三阶段夺旗挑战CTF(网络安全渗透)

全国职业院校技能大赛 高职组 信息安全管理与评估 (赛项) 评分标准 第三阶段 夺旗挑战CTF(网络安全渗透) 竞赛项目赛题 本文件为信息安全管理与评估项目竞赛-第三阶段赛题,内容包括:夺旗挑战CTF&#xff08…

Flink SQL你用了吗?

分析&回答 Flink 1.1.0:第一次引入 SQL 模块,并且提供 TableAPI,当然,这时候的功能还非常有限。Flink 1.3.0:在 Streaming SQL 上支持了 Retractions,显著提高了 Streaming SQL 的易用性,使…

探秘二叉树后序遍历:从叶子到根的深度之旅

本篇博客会讲解力扣“145. 二叉树的后序遍历”的解题思路,这是题目链接。 本题的思路是: 先创建一个数组,用来存储二叉树后序遍历的结果。数组的大小跟树的结点个数有关。树的结点个数可以使用递归实现,即总个数左子树结点个数右…

记录--vue 拉伸指令

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 在我们项目开发中,经常会有布局拉伸的需求,接下来 让我们一步步用 vue指令 实现这个需求 动手开发 在线体验 codesandbox.io/s/dawn-cdn-… 常规使用 解决拉伸触发时机 既然我们使用了指令的方式…