vue3 implements the el-table table radio selection function and selects a certain row of data by default

To achieve the following effect:

The implementation idea is as follows:

1. Implemented using the el-table component of the elemplent-plus component.

2. Use the select method and select-all method for data binding method.

3. Use the toggleRowSelection method to verify that the data is selected by default and to switch the status of a certain row. (For details, seeTable | Element Plus (element-plus.org))

The specific code screenshots are as follows:

1.el-table component

2.select method and select-all method

3. Click the edit button to find data with the same ID, and that row of data is selected by default.

This is ok, the effect is achieved! ! ! If you don’t understand anything, please comment in the comment section or send me a private message.