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

遇到的问题

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

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

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

解决问题

在表格中用到#default: scope:

就可以拿到表单该行的一些数据。

原理

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

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

更多可以移步于博客：

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