使用row-key和reserve-selection 对于需要跨页保持选中状态的场景,可以给表格设置row-key并启用reserve-selection属性。这需要确保每行数据有唯一标识(如id)。
<el-table
ref="multipleTable"
:data="tableData"
:row-key="getRowKeys"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
:reserve-selection="true"
></el-table-column>
<!-- 其他列 -->
</el-table>
<script>
const ids = ref([])
const handleSelectionChange = (selection: UserVo) => {
ids.value = selection.map((item) => item.userId);
}
const getRowKeys=(row:UserVO)=>{
return row.userId;
}
</script>
注意事项 使用reserve-selection时,必须指定row-key且数据中的该字段必须唯一。 跨页选中会占用内存,数据量过大时建议采用服务器端保存选中状态。 总结 以上可以有效解决分页时选中丢失的问题,对于简单场景,使用reserve-selection属性更为便捷,如果需要修改原有历史数据数组保存 数据更方便。