elementui 表格行选择:通过 toggleRowSelection 方法控制表格行的选中状态

复制代码
// 关键:等待表格渲染完成后,回显全局选中状态
    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);
          }
        });
      }
    });
  1. 数据来源

    • selectedIds.value - 存储已选中用户ID的集合(可能是 Set 类型)
    • userList.value - 当前查询到的用户列表数据
    • row.userId - 当前遍历到的用户对象的ID属性
  2. 执行流程

    • 首先通过 Array.from(selectedIds.value) 将可能是 Set 类型的 selectedIds.value 转换为数组 forSelectedIds
    • 遍历当前页的用户列表 userList.value
    • 对于每个用户对象 row,检查其 userId 是否存在于 forSelectedIds 数组中
    • 如果存在,调用 tableRef.value.toggleRowSelection(row, true) 方法将该行在表格中标记为选中状态
  3. 技术要点

    • includes() 方法:用于判断数组是否包含某个特定元素,返回布尔值
    • Array.from():将类数组对象或可迭代对象转换为真正的数组
    • nextTick():确保在DOM更新后执行回调,保证表格已经渲染完成
    • 表格行选择:通过 toggleRowSelection 方法控制表格行的选中状态
相关推荐
AI大模型-小华38 分钟前
Codex 三方充值快速入门指南
java·前端·数据库·chatgpt·ai编程·codex·chatgpt pro
做前端的娜娜子3 小时前
同一链接实现 PC Web 与移动 H5 自适应
前端·掘金·金石计划
小帅不太帅3 小时前
架构没变、规模没变,DeepSeek V4 Flash 正式版凭什么暴涨 47 分?
前端·aigc·deepseek
jarvisuni3 小时前
DeepSeekFlash前端依旧拉垮,而且变慢了很多!
前端·javascript·算法
卷福同学5 小时前
AI编程出海第二步:验证关键词能否做站
前端·人工智能·后端
赵庆明老师5 小时前
Vben精讲:21-详解web-antd:tsconfig.json
前端·json·vim
wc885 小时前
微软EDGE浏览器功能学习
前端·学习·edge
破z晓5 小时前
javascript 导出excel表
开发语言·javascript·excel
Csvn6 小时前
🎯 原生 `<dialog>` 元素:终于可以扔掉一半的自定义弹窗组件了?
前端