// 关键:等待表格渲染完成后,回显全局选中状态
nextTick(() => {
if (tableRef.value && userList.value.length) {
// 遍历当前页数据,勾选已选中的行
const forSelectedIds = Array.from(selectedIds.value);
userList.value.forEach((row:any) => {
if (forSelectedIds.includes((row.userId).toString())) {
tableRef.value.toggleRowSelection(row, true);
}
});
}
});
-
数据来源:
selectedIds.value- 存储已选中用户ID的集合(可能是 Set 类型)userList.value- 当前查询到的用户列表数据row.userId- 当前遍历到的用户对象的ID属性
-
执行流程:
- 首先通过
Array.from(selectedIds.value)将可能是 Set 类型的selectedIds.value转换为数组forSelectedIds - 遍历当前页的用户列表
userList.value - 对于每个用户对象
row,检查其userId是否存在于forSelectedIds数组中 - 如果存在,调用
tableRef.value.toggleRowSelection(row, true)方法将该行在表格中标记为选中状态
- 首先通过
-
技术要点:
includes()方法:用于判断数组是否包含某个特定元素,返回布尔值Array.from():将类数组对象或可迭代对象转换为真正的数组nextTick():确保在DOM更新后执行回调,保证表格已经渲染完成- 表格行选择:通过
toggleRowSelection方法控制表格行的选中状态