虚拟列表中渲染复杂表单项的关键是抽离状态、主动控焦、避免复用、轻量校验：用响应式对象管理编辑值，ref 恢复焦点，稳定 key 防组件复用，仅校验可见及编辑行。
复杂表单项（比如带输入框、下拉选择、日期组件、开关、校验逻辑的行内编辑项）在虚拟列表中渲染，关键不是“能不能放”，而是“怎么放才不卡、不丢状态、不重置”。核心矛盾在于：虚拟滚动会频繁销毁/重建 DOM，而表单控件自带内部状态和事件绑定，直接用 v-for 切片 + 重渲染会导致输入中断、焦点丢失、校验清空等问题。
保持表单状态不丢失
虚拟列表只保留可视区域的 DOM，但用户可能正在编辑某一行。必须把表单项的状态从 DOM 中抽离出来，统一管理：
- 用响应式对象（
ref或reactive）单独维护每行的编辑值，例如：const rowValues = ref({ [id]: { name: '', status: 'active' } }) - 表单项的
v-model绑定到这个外部状态，而不是原始数据字段；原始数据仅作展示兜底 - 提交或失焦时，再将编辑值同步回主数据源（或发请求），避免滚动时自动保存
处理焦点与输入体验
滚动后新渲染的行默认无焦点，用户无法连续编辑。需主动恢复焦点：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 给每个可编辑单元格加
ref（如:ref="el => inputRefs[item.id] = el"） - 监听
visibleItems变化，用nextTick+el.focus()恢复上一次编辑行的焦点 - 对
input/select等元素，建议加autofocus或key控制重用逻辑（例如:key="item.id + '-edit'"防止 Vue 复用旧 input 元素）
兼容 Element Plus 表格的复杂列
如果用 el-table 做虚拟化（无论是内置 virtual-scroll 还是自定义指令），注意：
- 自定义列模板（
el-table-column内的#default）可以照常写表单，但要确保所有子组件都支持响应式 props 和受控模式 - 禁用
row-key的自动重用行为，改用稳定key（如:key="scope.row.id + '-form'"）避免组件实例被错误复用 - 日期选择器、级联选择器等弹出类组件，需确认其挂载容器（
teleported）未因父元素销毁而意外关闭；建议设popper-append-to-body="false"并指定表格 body 为挂载点
校验与交互反馈的轻量化
整表校验在虚拟列表里不现实——看不见的行不该参与校验。应改为：
- 仅对当前可见行 + 正在编辑的行做实时校验（配合
el-form-item的prop和validate方法） - 提交前，遍历所有已修改的行 ID，批量触发对应行的校验逻辑
- 错误提示用
el-tooltip或行内小图标代替浮层，避免因 DOM 销毁导致提示消失
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
