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

Smile_2542204182026-05-30 9:06

reactive 方式

javascript 复制代码

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())

javascript 复制代码

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 方式

javascript 复制代码

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