遇到的问题
在做表格的时候,表格是封装好了的,用于展示数据。如果想给单行增加按钮,可以单独写一列存放按钮,最基本的需求是,点击按钮后要拿到数据然后发起请求。
且Vue的element-plus,当我们点击按钮之后会自动触发行点击事件。这本身是一件好的事情,但难搞的地方在于,执行顺序。也就是,==先点击按钮,再拿到数据。==这样的话,每一次点击按钮,拿到的都是上一次的数据。
怎么样才能解决问题?我尝试了很多方法,比如点击按钮后重新加载行点击(这样不行,因为就算是存放了row的数据,点击事件也是上一次的数据),比如Vue的事件修饰符(无法做到这样的修饰),都无法解决。
解决问题
在表格中用到#default: scope:
就可以拿到表单该行的一些数据。
原理
这里用到了Vue的作用域插槽。
这里复习下作用域插槽的定义:当数据在组件自身,但根据数据生成的结构需要组件使用者来定,我们则可以使用作用域插槽。
更多可以移步于博客:
vue插槽之插槽的用法及作用域插槽详解