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 方法控制表格行的选中状态
相关推荐
黄林晴2 小时前
Swift 杀进 Android,Google 和 Apple 都要失眠了?
android·前端·swift
一晌小贪欢2 小时前
Web 自动化指南:如何用 Python 和 Selenium 解放双手
开发语言·前端·图像处理·python·自动化·python办公
云浪2 小时前
认识 Service Worker
前端·javascript
方也_arkling2 小时前
【Vue-Day11】props的使用
前端·javascript·vue.js
心之语歌2 小时前
前端刷新处理数据的几种方式
前端
FlyWIHTSKY2 小时前
Vue3 插槽(Slot)使用
前端·javascript·vue.js
血玥珏2 小时前
血玥珏-BMP名字图片生成器
前端·html
ZTLJQ2 小时前
构建网页的三剑客:HTML, CSS, JavaScript 完全解析
javascript·css·html