首先来看一下,element-ui官网里面的两个属性方法,解决数据丢失,主要靠下面几种方法:
| row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 http://user.info[0].id，此种情况请使用 Function。 |
| reserve-selection | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key） |
| selection-change | 当选择项发生变化时会触发该事件 |
<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>函数部分:
getRowKeys(row) {
// id 是后台传递的每行信息唯一标识
return row.id;
},
handleSelectionChange(val) {
this.multipleSelection = val;
}1、前端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库