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

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

遇到的问题

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

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

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

解决问题

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

原理

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

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

更多可以移步于博客:

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

http://www.lryc.cn/news/150680.html

相关文章:

  • OJ练习第158题——单词拆分 II
  • ArcGIS地块面积分割调整工具插件
  • 基于Matlab实现多个图像增强案例(附上源码+数据集)
  • 计算机网络 概述部分
  • 使用DOSBOX运行TurboC2,TC2使用graphics库绘图
  • OpenCV(二):认识Mat容器
  • springboot整合Excel填充数据
  • c语言技术面试记录 ---- 纲要、题目、分析及给分标准
  • 前端进阶之——模块化
  • Python爬虫抓取表情包制作个性化聊天机器人
  • 使用pip命令安装库,装到其他环境中的问题。
  • 如何使用CSS实现一个带有动画效果的进度条?
  • uni-app 报错 navigateTo:fail page “/pages/.../...“ is not found
  • 【unity插件】使用BehaviorDesigner插件制作BOSS的AI行为树
  • 概念解析 | 量子机器学习:将量子力学与人工智能的奇妙融合
  • 【Cortex-M3权威指南】学习笔记4 - 异常
  • RISC-V(2)——特权级及特权指令集
  • Linux——常用命令大汇总(带你快速入门Linux)
  • 记录 使用 git 克隆仓库报错:Warning: Permanently added‘github.com’ to the .....(ssh )
  • kafka---- zookeeper集群搭建
  • linux安装firefox
  • 【MySQL】基础语法总结
  • 【玩玩Vue】使用el-menu作为菜单时,通过一二级路由控制菜单高亮
  • 9.2 【C语言】使用结构体数组
  • leetcode原题: 最小值、最大数字
  • Prompt2Model: Generating Deployable Models from Natural Language Instructions
  • 前端埋点 sendBeacon 替代方式
  • 面试官问我MySQL和MariaDB的联系和区别,这我能不知道?
  • 1.网络空间搜素引擎
  • 《安富莱嵌入式周报》第321期:开源12导联便携心电仪,PCB AI设计,150M示波器差分探头,谷歌全栈环境IDX,微软在Excel推出Python