情况1el-select默认显示0el-select v-modelqueryDTO.checkGroupId placeholder请选择 clearable filterable stylewidth: 240pxel-option v-foritem in checkGroupOptions :keyitem.key :labelitem.label :valueitem.key //el-select// 查询对象interface QueryDTO {page?: number;size?: number;outerApplyId?: string;checkGroupId?: number;sjdwName?: string;submitDateBegin?: string;submitDateEnd?: string;receiveDateBegin?: string;receiveDateEnd?: string;}中的 checkGroupId?: number; 改为 checkGroupId?: number | null;queryDTO.value.checkGroupId 0;再将 queryDTO.value.checkGroupId 0; 改为 queryDTO.value.checkGroupId null;情况2原来的代码// 空受理基础信息用于新增重置 const emptyApplyBasicInfo: ApplyBasicInfoResponse { examinationTypeId: 0, examinationTypeName: , outerApplyNo: , acceptTypeCode: , acceptTypeName: , acceptDate: , acceptGroupId: 0, acceptGroupName: , accepter: , accepterName: , reportDeadline: , wspjType: WspjType.NONE, sjdwName: , sjdwAddress: , sjdwRegion: , cydwName: , samplingDate: , samplingName: , samplingMethod: , wsdwName: , wsdwAddress: , consignName: , contactName: , contactPhone: , contactEmail: }; // 本地响应式副本 const localApplyBasicInfo refApplyBasicInfoResponse({ ...emptyApplyBasicInfo });/** * 受理基础信息响应对象 */ export type ApplyBasicInfoResponse { /** * 受理编号 */ outerApplyNo: string; /** * 检验类别 ID */ examinationTypeId: number; /** * 检验类别 */ examinationTypeName: string; /** * 受理类别编码 */ acceptTypeCode: string; /** * 受理类别 */ acceptTypeName: string; /** * 受理日期 */ acceptDate: string; /** * 受理组别 ID */ acceptGroupId: number; /** * 受理组别 */ acceptGroupName: string; /** * 受理人用户名/账号 */ accepter?: string; /** * 受理人 */ accepterName?: string; /** * 报告限期 */ reportDeadline: string; /** * 评价类型0不评价1卫生评价【WSPJ 卫生评价拼音缩写】 */ wspjType: number; /** * 受检单位【SJDW 受检单位拼音缩写】 */ sjdwName?: string; /** * 受检单位地址【SJDW 受检单位拼音缩写】 */ sjdwAddress?: string; /** * 受检单位所属区域/街道 */ sjdwRegion?: string; /** * 采样单位【CYDW 采样单位拼音缩写】 */ cydwName?: string; /** * 采样日期 */ samplingDate?: string; /** * 采样人 */ samplingName?: string; /** * 采样人列表 */ samplingNames?: Arraystring; /** * 采样方式/样品来源 */ samplingMethod?: string; /** * 委托/送检单位委送单位【WSDW 委送单位拼音缩写】 */ wsdwName?: string; /** * 委托/送检单位地址委送单位地址【WSDW 委送单位拼音缩写】 */ wsdwAddress?: string; /** * 委托/送检人委送人 */ consignName?: string; /** * 联系人 */ contactName?: string; /** * 联系电话 */ contactPhone?: string; /** * 联系邮箱 */ contactEmail?: string; /** * 创建时间 */ createTime?: string; };✅ 理解问题examinationTypeId和acceptGroupId在业务上必须有值必填但在初始状态时我们不想让el-select显示0而是希望显示placeholder如“请选择”。✅ 解决方案方案一在formRules中校验但初始值用undefined推荐核心思想类型声明为必填但初始值使用undefined通过as断言绕过类型检查在提交时确保有值。typescriptconst props withDefaults( defineProps{ modelValue?: ApplyBasicInfoResponse; operationCommand: ApplyBasicInfoOperationCommand; }(), { modelValue: () { return { examinationTypeId: undefined as unknown as number, // ✅ 类型断言 acceptGroupId: undefined as unknown as number, // ✅ 类型断言 // ... 其他字段 } as ApplyBasicInfoResponse; }, operationCommand: ApplyBasicInfoOperationCommand.INFO_VIEW } );优点不修改类型定义初始值为undefined占位符正常显示必填校验由formRules保证方案二使用ref中间层默认值为undefined在组件内部维护一个中间变量typescript// 组件内部 const localFormData refApplyBasicInfoResponse({ ...props.modelValue, examinationTypeId: undefined as any, acceptGroupId: undefined as any });模板中使用localFormData提交时再校验。方案三父组件传入时确保初始值为undefined最干净在父组件AcceptInput初始化applyBasicInfo时将这两个字段初始化为undefinedtypescriptconst applyBasicInfo refApplyBasicInfoResponse({ // ... acceptGroupId: undefined as any, examinationTypeId: undefined as any, // ... }); 最终推荐方案一因为它改动最小且保持了类型声明的完整性typescriptconst props withDefaults( defineProps{ modelValue?: ApplyBasicInfoResponse; operationCommand: ApplyBasicInfoOperationCommand; }(), { modelValue: () { return { examinationTypeId: undefined as unknown as number, examinationTypeName: , outerApplyNo: , acceptTypeCode: , acceptTypeName: , acceptDate: , acceptGroupId: undefined as unknown as number, acceptGroupName: , // ... 其他字段 }; }, operationCommand: ApplyBasicInfoOperationCommand.INFO_VIEW } );这样✅ 类型保持number必填✅ 初始值显示占位符不显示0✅ 表单校验会拦截空值required: true✅ 提交时一定有值用户必须选择 注意这种写法使用了undefined as unknown as number类型断言虽然看起来有点“hack”但在这个场景下是安全且常用的做法因为初始状态确实没有有效值而业务上最终会由用户选择填上。
