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 方法控制表格行的选中状态
相关推荐
迷途小羔羊6 小时前
环境搭建
前端·javascript·后端
夕阳_醉了6 小时前
让 AI 回答“打字般”浮现:用 Vue 3 + DeepSeek 实现流式聊天
前端·vue.js·人工智能
SabrinaW7117 小时前
基于 C++17 与 RTTR 的注册式对象工厂:配置驱动的动态对象创建
java·前端·数据库
Amos_Web7 小时前
Rspack 源码解析(二十九):CopyRspackPlugin 如何用 glob 把静态文件复制进产物
前端
铁皮饭盒7 小时前
刷到 FDE 岗位那一刻,我还以为前端又活了
前端·后端
酷炫码神7 小时前
Day 9|Vue Router:把单页后台拆成能跳转的多页面
前端·javascript·vue.js
Sapphire~7 小时前
odoo-095 视图的重写规则(全部重写还是部分改写)
开发语言·javascript·ecmascript
肖永威7 小时前
python版微电网仿真工具的前端托管选型:从http.server到FastAPI StaticFiles
前端·python·http·fastapi
风骏时光牛马7 小时前
AI插件开发与效能提效工具箱
前端
IT_陈寒7 小时前
为什么你应该学习Java?
前端·人工智能·后端