首先来看一下,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; }
前端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库
