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 方法控制表格行的选中状态
相关推荐
Mh36 分钟前
鼠标跟随倾斜动效
前端·css·vue.js
小码哥_常2 小时前
Kotlin类型魔法:Any、Unit、Nothing 深度探秘
前端
Web极客码3 小时前
深入了解WordPress网站访客意图
服务器·前端·wordpress
幺风3 小时前
Claude Code 源码分析 — Tool/MCP/Skill 可扩展工具系统
前端·javascript·ai编程
vjmap3 小时前
唯杰地图CAD图层加高性能特效扩展包发布
前端·gis
ZC跨境爬虫3 小时前
3D 地球卫星轨道可视化平台开发 Day7(AI异步加速+卫星系列精简+AI Agent自动评论)
前端·人工智能·3d·html·json
ID_180079054733 小时前
淘宝 API 上货 / 商品搬家 业务场景实现 + JSON 返回示例
前端·javascript·json
M ? A4 小时前
Vue 动态组件在 React 中,VuReact 会如何实现?
前端·javascript·vue.js·经验分享·react.js·面试·vureact
vipbic4 小时前
独立开发复盘:我用 Uni-app + Strapi v5 肝了一个“会上瘾”的打卡小程序
前端·微信小程序
IT_陈寒5 小时前
Vite的热更新突然失效,原来是因为这个配置
前端·人工智能·后端