element-ui中使用el-table表格进行多选操作时,当勾选了第一页数据,再点击第二页后第一页的选中数据被清空
查询官方文档发现给出了 row-key 和 reserve-selection
- row-key
行数据的Key,用来优化Table的渲染;在使用reserve-selection功能与显示树形数据时,该属性是必填的。 - reserve-selection
仅对type=selection 的列有效,类型为Boolean,为true则会在数据更新之后保留之前选中的数据(需指定row-key)
解决方法
- :row-key="getRowKey"
写在el-table 中,methods中声明getRowKey()方法
<el-table :data="holidayTableData" border :row-key="getHolidayRowKey"
ref="holidayTableDataRef"
@select="handleSelectAddSingle"
@select-all="handleSelectAddAll"
>
<el-table-column align="center" type="selection" width="55" reserve-selection="true"></el-table-column>
<el-table-column align="center" prop="name" label="名称"></el-table-column>:formatter="formatterHolidayDate"></el-table-column>
</el-table>
getHolidayRowKey(row){
return row.id;
},
- :reserve-selection="true"
写在el-table-column中type为select的行中
<el-table-column align="center" type="selection" width="55" reserve-selection="true"></el-table-column>