Project scenario:
After checking the data on the first page, then switch to the second page, check a few, then return to the first page, you will find that the data checked on the first page is gone, and then return to the second page , the checked data is also gone, so it is necessary to optimize the component page 19 to echo the checked data
Cause Analysis:
This table is a previously encapsulated component, driven by tableDataList and propConfig. At first, the table only has the data of the first page. When switching to the second page, we need to obtain the data of the second page from the interface and assign it to tableDataList. Change, the component re-renders, but when we return to the first page, the component also re-renders, after re-rendering, the selection box is all unselected
solution:
table-column1. Add reserve-selectionattributes in element
Only valid for columns with type=selection, the type is Boolean, if it is true, the previously selected data will be retained after the data is updated (row-key needs to be specified)
2. Add the row-key attribute to the el-table to optimize the rendering of the Table; this attribute is required when using the reserve -selection function and displaying tree data.
3. The js part writes the row-key method
In this way, because each rowhas a unique key, when switching pages, the currently selected data will be retained. When switching back again, the table will match itself. If the data is consistent with the previously selected, the selected data will be selected. box echo