elementplus 的el-table,多选翻页后,之前选择的数据丢失问题处理

114 阅读1分钟

使用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属性更为便捷,如果需要修改原有历史数据数组保存 数据更方便。