vue3 + ts reactive方式清空表单对象

reactive 方式

const emptyForm = (): DefectRecord => ({ recordStatus: DEFECT_RECORD_STATUS.DRAFT, unsafeBehaviorFlag: false, rectifiedOnRegister: false, isRepeat: false, hasEquipment: false, observeTime: nowStr(), observerId: currentUserId.value, observerNickname: currentUserName.value }) const form = reactive<DefectRecord>(emptyForm())

function resetFormData() { Object.keys(form).forEach(key => { delete form[key] }) Object.assign(form, emptyForm()) proxy.resetForm('formRef') }

Object.assign(form, emptyForm()) 这个只能替换 emptyForm 中定义的字段

emptyForm 中没有定义的字段 比如 id 、remark 、status 等等其他字段会保持原样

下面这样 先 删除所有key 再 赋值 就能达到重置的效果

Object.keys(form).forEach(key => {
delete form[key]
})
Object.assign(form, emptyForm())

ref 方式

// 如果你用的是 ref() 就简单很多： // 表单很常见 const form = ref({ name: '', age: 0 }) // 正确重置方式(这会清空没有列出来的字段)： form.value = { name: '', age: 0 }