表格中点不开主因是dom不可见、pointer-events: none、disabled/readonly属性或缺少name/value导致浏览器禁用交互；需确保可见、可聚焦、有足够高度且格式严格为yyyy-mm-dd。
date input 在表格单元格里为什么点不开？
多数情况是 <td> 里直接塞 <code><input type="date">，但没设 name 或 value，浏览器识别为“无效日期字段”而禁用交互。更常见的是表格用了 display: none、visibility: hidden 或父级设置了 pointer-events: none，导致点击穿透失败。
- 确保
<input type="date">在 DOM 中可见且可聚焦（加tabindex="0"可手动测试） - 避免在
<td> 上设置 <code>overflow: hidden且未预留足够高度——原生 date picker 下拉面板需要垂直空间，最小建议min-height: 40px - 不要用
disabled或readonly属性，二者都会阻止弹出选择器；如需锁定，改用 JS 监听input事件并 revert 值 - 读取时用
input.value（始终是字符串），不要用input.valueAsDate——它在清空输入后返回null，易引发 TypeError - 设置初始值前先校验：若后端返回
"2023-12-25"，可直接赋值；若返回"2023/12/25"或时间戳，必须先转成标准格式，例如：new Date(timestamp).toISOString().slice(0,10) - 监听
change事件而非input——前者保证用户确认选择，后者在键盘输入时频繁触发且格式可能非法 - 不要依赖 CSS 伪元素（如
::after）覆盖默认箭头——各浏览器实现不同，iOS Safari 根本不暴露伪元素钩子 - 移动端真机测试必不可少：Android Chrome 允许滚动选择，iOS Safari 弹出滚轮式 calendar，但都要求
<input>处于 viewport 内且未被遮挡 - 如果项目需强兼容性，别硬扛——用
<input type="text">+ 第三方库（如 flatpickr）替代，但注意其初始化必须等<tr> 完全挂载 DOM 后执行，否则绑定失败 <h3>表格中多个 date input 的性能与内存风险 </h3> <p>一个含 50 行的表格，每行一个 <code><input type="date">，首次渲染时浏览器要为每个控件构建独立的 native picker 实例。虽不卡顿，但切换 tab 或后台运行时，部分浏览器（尤其是旧版 Safari）会持续持有这些 picker 的引用，导致内存泄漏。- 懒加载策略：只对当前可视区域内的
<tr> 渲染 <code>type="date"，其余行用占位文本（如<span class="date-placeholder">—</span>），滚动时动态替换 - 销毁时机：当某行被
remove()或innerHTML = ""清空时，务必先调用input.remove()，否则 Safari 可能保留已卸载控件的 picker 状态 - 避免在
onchange回调里直接操作整个表格 DOM（如重绘 tbody）——应只更新对应单元格的关联数据，用 dataset 或自定义属性标记行 ID
实际应用里最常被忽略的是 value 格式校验和移动端真机验证。哪怕桌面端一切正常，iOS 用户点开空白 picker 或 Android 用户输完日期却无法提交，往往就卡在这两步。
- 懒加载策略：只对当前可视区域内的
如何让 date input 的值和表格数据同步更新？
原生 <input type="date"> 的 value 必须是 YYYY-MM-DD 格式字符串，和 JavaScript Date 对象不兼容。直接赋 new Date().toISOString().split('T')[0] 是安全写法，但手动拼接容易出错。
不同浏览器对 table + date input 的渲染差异
Chrome 和 Edge 渲染正常；Safari 在 iOS 16.4+ 才支持 type="date"，旧版会降级为文本框；Firefox 桌面版支持，但 Android Firefox 默认禁用原生 picker，回退为文本输入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
