资金使用表单新增时资金名称下拉框未清空，利用 Vue 的 key 特性，每次新增时强制销毁并重建 CapitalUseForm 组件，从根本上清除所有内部状态
问题描述：
问题总结：资金使用表单新增时资金名称下拉框未清空
问题描述
在资金使用页面，点击【新增】按钮打开表单对话框时，资金名称下拉框中会残留上一次选中值（或其他非空值），而其他输入框（如申请原因、收款单位等）均正常重置为空。
根本原因
组件复用导致状态残留：
CapitalUseForm组件在对话框关闭后并未销毁，再次新增时被复用，内部状态（如el-select的选中值）未完全重置。异步数据加载触发自动选中：可用资金列表通过
availableCapitalStore异步加载。当组件复用时，el-select在选项列表从空变为有数据的过程中，Element Plus 内部会尝试匹配当前值（初始为null），部分版本会自动选中第一个选项，从而覆盖了手动重置的null。
尝试过但无效的方案
移除
el-select的default-first-option属性手动重置
actualUseTotal等独立字段添加
watch保护allocateDetailId，强制改回null使用计算属性安全绑定，避免 TypeScript 类型错误
监听可用资金列表变化并重置选中值
这些方案要么未能彻底阻止自动选中，要么因组件复用导致其他字段重置失效，最终效果不理想。
最终有效方案：强制重建表单组件
利用 Vue 的key特性，每次新增时强制销毁并重建CapitalUseForm组件，从根本上清除所有内部状态。
核心代码
父组件（CapitalUse）
vue
<template> <WorkflowMainDialog> <template #default> <CapitalUseForm ref="capitalUseFormRef" :key="`${store.currentCapitalUse?.id ?? 'create'}_${resetKey}`" :data="store.currentCapitalUse" @modified="handleModified" /> </template> </WorkflowMainDialog> </template> <script setup> const resetKey = ref(0); const handleAdd = async () => { resetKey.value++; // 改变 key，强制重建表单 store.setCurrentCapitalUse(null); capitalUseTableRef.value?.setCurrentRow(); await nextTick(); workflowMainDialogRef.value?.openDialog(); }; </script>子组件（CapitalUseForm）
保留原有的数据重置watch，无需额外保护逻辑：
ts
watch( () => props.data, (newData) => { if (!newData) { formData.value = { allocateDetailId: null, applyReason: "", ... }; actualUseTotal.value = null; // 触发可用资金加载（若需要） if (availableCapitalStore.availableAllocateDetails.length === 0) { availableCapitalStore.getAvailableAllocateDetails(); } } else { formData.value = { ...newData }; } }, { immediate: true, deep: true } );方案优势
彻底清除残留：组件重建后所有内部状态（包括
el-select的选中值）均为全新。代码简洁：仅需在父组件增加一个
resetKey变量和模板:key绑定，子组件无需复杂修改。性能友好：仅新增时重建组件，编辑/查看模式复用组件，开销极小。
与异步数据解耦：无论异步数据何时加载完成，新组件都会正常渲染且不会自动选中。
经验总结
组件复用需谨慎：当组件内部状态与异步数据耦合时，复用可能导致状态残留。通过动态
key强制重建是简单可靠的解决方案。el-select自动选中的本质：当选项列表从空变为非空时，部分 UI 库会尝试将当前值匹配到第一个选项，这是设计行为，应通过控制渲染时机（如数据就绪后再渲染）或组件重建来规避。简化优于叠加：多次尝试添加保护逻辑后，最终发现最简洁的方案（强制重建）反而最稳定。在复杂问题面前，有时“重置一切”比“修补状态”更高效。
通过上述方案，资金名称下拉框在新增时已能正确清空，且不影响其他字段的正常重置。