Problems encountered
When making tables, the tables are encapsulated and used to display data. If you want to add a button to a single row, you can write a separate column to store the button. The most basic requirement is to get the data and initiate a request after clicking the button.
And Vue's element-plus will automatically trigger a row click event when we click the button. This is a good thing in itself, but the tricky part is the order of execution. That is, == click the button first, and then get the data. ==In this case, every time you click the button, you will get the last data.
How can we solve the problem? I have tried many methods, such as reloading the row after clicking the button (this does not work, because even if the row data is stored, the click event is the last data), such as Vue's event modifier (such modification cannot be done) , cannot be solved.
Solve the problem
Use #default: scope: in the form
to get some data in the row of the form.
principle
Vue's scope slot is used here.
Let’s review the definition of scope slots here: When the data is in the component itself, but the structure generated based on the data needs to be determined by the component user, we can use scope slots.
More can be found on the blog:
Detailed explanation of the usage of vue slot and scope slot