新闻详情

新闻详情

首页 / 资讯中心 / 详情

# el-table 复选框无法选中问题记录

发布时间:2026/9/29 21:33:43来源:尧图网络
# el-table 复选框无法选中问题记录
场景网页使用 Playwright 勾选 Element UI 表格el-table中匹配病人的行。## 一、问题描述在 el-table 中勾选匹配病人的行时遇到三个问题1. 表格里**部分行的复选框根本不可选**被 CSS 隐藏但代码识别不出来导致对这些行执行勾选动作。2. 对不可选行调用 locator.click() / check() 时操作**一直卡在 waiting...**最终报 Timeout exceeded默认等 30 秒设短超时后等 2 秒。3. 同时有些行**一开始就已经被勾上了**is-checked再点会把它取消掉。## 二、排查与尝试过程### 尝试 1用 isDisabled() 判断可选性 —— 失败原以为不可选行会有 disabled 属性。但打印两个 input 的 outerHTML 后发现两者完全一致htmlinput typecheckbox aria-hiddenfalse classel-checkbox__original value都没有 disabled结果 isDisabled() 对两行都返回 falseif (!disabled) 走进了不可选行并卡死。### 尝试 2检查 pointer-events / is-disabled 类 —— 方向偏了打印 label 完整 HTML 后发现两行都是 pointerEvents: auto、都没有 is-disabled 类即不是 CSS 禁用也不是原生禁用。但第 1 行 label 带 is-checked——说明它是**已勾选**不是不可选。### 尝试 3拿到完整 tbody 才看到真信号 —— 成功定位完整 HTML 显示选择列 td 的差异- 可选行td class...el-table-column--selection undefined- 不可选行td class...el-table-column--selection hiddenTdCheckbox**关键差异是选择列 td 上的 hiddenTdCheckbox 类**——它用 CSS 把勾选框藏起来所以不可选。之前的 disabled / is-disabled 思路都没打到点。### 卡死原因click() 默认要等元素「可见、稳定、能接收事件」hiddenTdCheckbox 行被隐藏永远不满足于一直接 waiting 直到超时。## 三、最终解决方法### 1. 用 hiddenTdCheckbox 类识别不可选行提前跳过真实信号tsconst selClass (await row.locator(td.el-table-column--selection).getAttribute(class)) ?? ;if (selClass.includes(hiddenTdCheckbox)) continue; // 不可选跳过### 2. 用 isChecked() 跳过已勾选行防止点一下反被取消tsconst input row.locator(input.el-checkbox__original);if (await input.isChecked()) continue;### 3. 用 evaluate 触发勾选彻底避免等待/卡死tsawait input.evaluate((el: HTMLInputElement) el.click());evaluate 是浏览器内同步立即执行不做任何 actionability 等待不会被隐藏/失稳元素卡住。### 4. 兜底短超时 try/catch 保证不卡流程tstry {await row.locator(.el-checkbox__inner).click({ timeout: 2000 });} catch (e) {console.log(点击失败跳过 (e as Error).message);}## 四、完整逻辑tsconst n await rows.count();for (let i 0; i n; i) {const row rows.nth(i);const selClass (await row.locator(td.el-table-column--selection).getAttribute(class)) ?? ;if (selClass.includes(hiddenTdCheckbox)) continue; // 不可选行跳过const input row.locator(input.el-checkbox__original);if (await input.isChecked()) continue; // 已勾选跳过await input.evaluate((el: HTMLInputElement) el.click()); // 勾选未选行}## 五、核心结论- Element UI 表格「不可选」行的判定信号是选择列 td 的 **hiddenTdCheckbox 类CSS 隐藏**不是 disabled 属性。- 勾选动作用 evaluate 触发比 click() / check() 更稳不会被隐藏 / 重渲染元素卡住。- force: true 不是「不等待」隐藏元素仍会超时必须用 hiddenTdCheckbox 类提前跳过。
网站建设高端定制企业官网
RELATED

相关资讯

更多精彩内容,欢迎继续阅读

较早相关资讯

最新相关资讯

React 重渲染优化:将状态读取延迟到使用点(Defer State Reads to Usage Point)——避免 searchParams 与 localStorage 的不必要订阅 2026/9/29 23:11:21

React 重渲染优化:将状态读取延迟到使用点(Defer State Reads to Usage Point)——避免 searchParams 与 localStorage 的不必要订阅

【免费下载链接】open-slide A slide framework built for agents. 项目地址: https://gitcode.com/gh_mirrors/op/open-slide 点击查看 免费下载 本文围绕 open-slide 仓库中 Vercel React 最佳实践技能包(.agents/skills/vercel-react-best-practices…

阅读更多 →
特种供电选型之前,先把负载的“致命软肋”问明白 2026/9/29 23:11:21

特种供电选型之前,先把负载的“致命软肋”问明白

很多做硬件系统、测控平台或特种装备集成的工程师,在选型初期都容易踩进同一个直觉陷阱:把电源当成插线板,觉得只要输入输出电压对得上、额定功率留足余量就万事大吉了。直到样机联调整机上电,现场才开始频繁暴雷——要么是前端极…

阅读更多 →
GPON OLT模块B+3dB SC接口 传输20Km 2026/9/29 23:11:20

GPON OLT模块B+3dB SC接口 传输20Km

GPONOLT模块B3dB光模块(单模,1490nm-TX/1310nm-RX20km,SC)该GPONOLTSFP光模块支持最高2.5G-TX/1.25G-RX的数据传输速率,适用于单模光纤(单模),最远传输距离可达20km,使用…

阅读更多 →
OpenClaw从入门到应用——CLI:Approvals 配置与验证指南(TaoToken 统一 Key 接入) 2026/9/29 23:11:20

OpenClaw从入门到应用——CLI:Approvals 配置与验证指南(TaoToken 统一 Key 接入)

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →
VS2019编译版paho.mqtt.cpp库使用全攻略:配置、示例与排坑 2026/9/29 23:11:19

VS2019编译版paho.mqtt.cpp库使用全攻略:配置、示例与排坑

简介:面向需要在VS2019下使用MQTT C客户端的开发者,paho.mqtt.cpp库的VS2019编译成品包源自配套博文教程,可直接对照使用。paho.mqtt.cpp是Eclipse Paho官方的MQTT C客户端库,支持同步/异步API,常用于物联网设备接入、…

阅读更多 →
Agent Skills 终极指南:零代码打造智能应用,TaoToken 配置与验证全流程 2026/9/29 23:11:05

Agent Skills 终极指南:零代码打造智能应用,TaoToken 配置与验证全流程

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →

今日资讯

本周资讯

本月资讯

看完文章仍有疑问?

联系尧图顾问,获取一对一建站咨询

立即免费咨询 📞 400-888-8888
📞 ✉