First of all, let’s take a look at the two attribute methods in the official website of element-ui. To solve data loss, there are mainly the following methods:
| row-key | The Key of the row data, used to optimize the rendering of the Table; this attribute is required when using the reserve-selection function and displaying tree data. When the type is String, multi-layer access is supported: user.info.id, but http://user.info [0].id is not supported, please use Function in this case. |
| reserve-selection | 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) |
| selection-change | This event is fired when the selection changes |
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%; height: 330px; overflow：scoll"
max-height="330px"
:row-key="getRowKeys"
@selection-change="handleSelectionChange"
v-loadmore="loadMore"
>
<el-table-column type="selection" width="55" :reserve-selection="true" ></el-table-column>
<el-table-column prop="code" label="编码" width="120"> </el-table-column>
<el-table-column prop="title" label="标题" width="120"> </el-table-column>
<el-table-column prop="museumId" label="所属博物馆" show-overflow-tooltip></el-table-column>
</el-table>Function part:
getRowKeys(row) {
// id 是后台传递的每行信息唯一标识
return row.id;
},
handleSelectionChange(val) {
this.multipleSelection = val;
}1. Front-end interview question bank ( necessary for interview) recommendation: ★★★★★
Address: front-end interview question bank