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 方法控制表格行的选中状态
相关推荐
27669582926 小时前
youdao/有道翻译APP 算法协议分析
开发语言·前端·python·sign·youdao·有道翻译app算法·有道app协议请求
奕鼎竜瑆14 小时前
Solid 前端响应式开发从零到精通
前端·人工智能
动恰客流统计14 小时前
景区客流统计怎么做?兼顾管控与运营的实施方案解析
大数据·前端·人工智能
派小心.15 小时前
A/B测试工具免费版够用吗?
前端·数据分析
前端snow15 小时前
ai agent --- redis 缓存
前端
duanshu_16 小时前
官网表单与下载异常怎么排查?五个环节定位故障
前端·自动化·flyweight
Zhou14113617 小时前
SpringBoot_03_Web开发
前端·spring boot·python
辻弋20117 小时前
【无标题】
大数据·服务器·前端·搜索引擎·开源软件
FluxArt17 小时前
GPT Image 2.5 中文提示词教程:Flux Art 可复用模板
前端·gpt·算法
搬砖的小码农_Sky18 小时前
AI Agent:Windows上Node.js安装后 npm -v报错
前端·npm·node.js·人机交互