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

这篇具有很好参考价值的文章主要介绍了Vue在表格中拿到该行信息的方式（作用域插槽-#default-scope-解决按钮与行点击的顺序问题）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

遇到的问题

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

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

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

在表格中用到#default: scope:
Vue在表格中拿到该行信息的方式（作用域插槽-#default-scope-解决按钮与行点击的顺序问题）,实习期,vue.js
就可以拿到表单该行的一些数据。

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

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

更多可以移步于博客：

vue插槽之插槽的用法及作用域插槽详解文章来源地址https://www.toymoban.com/news/detail-690386.html

到了这里，关于Vue在表格中拿到该行信息的方式（作用域插槽-#default-scope-解决按钮与行点击的顺序问题）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！