竟然被element-plus背刺了

引言

闲来无事，在 GitHub 上找了一个开源项目玩玩。结果一打开就看傻了眼：引入了一堆库，用到的功能却屈指可数。

于是我顺手做了"减肥手术"------把没用的库都砍了。砍着砍着问题就来了：有个库删掉之后，项目居然报错，提示需要 Element Plus 2.3.7 版本。升级之后倒是能跑了，但我发现里面连基础组件封装都没有。

按照我一贯的习惯，我就重新封装了 Dialog > Form 这一层级的表单组件，让弹窗表单写起来更轻量、更一致。

不过，意外出现了一个老熟人：resetFields 重置不生效。

问题1 resetFields 不重置初始值

在 el-dialog > el-form 中使用 resetFields() 理论上会把表单重置为"初始值"，即组件 model 初始化时的值。

vue3 复制代码

const form = reactive({
  name: '',
  age: '',
})

const reset = () => {
  ruleFormRef.value?.resetFields()
}

const openDialog = (row) => {
    Object.assign(form, row)
    visible.value = true
}

问题是

初次新增调用openDialog，row为空，正常
初次编辑调用openDialog，row为正常表单数据，显示正常
关闭编辑后，再打开新增，数据未被清除

vue3 复制代码

form = reactive({})
ruleFormRef.value?.resetFields()

问题2 使用ref声明model，二次打开触发校验

在以上问题点出现后，使用ref声明model，在新增时，将model重新赋值为空对象

ini 复制代码

const form = ref({
  name: '',
  age: '',
})

const reset = () => {
  ruleFormRef.value?.resetFields()
}

const openDialog = (type, row) => {
    form.value = row
    if (type === 'add') form.value = {}
    visible.value = true
}

原因分析

restFields 有一个依赖初始值，不是在挂载，也不是在声明时，需要和代码书写分开。它是指第一次打开dialog声明的form，也就是visible=true的值
那为什么触发校验呢，ref引用变了，触发了form中的校验，推荐使用Object.assign

解决方案

手动删除model中的属性值
在Dialog上加上destroy-on-close或者使用v-if来让每次的初始值基于声明的值
在新增的时候传递一个初始对象，覆盖原值
在弹窗打开之后再做赋值操作

vue3 复制代码

  dialogVisible.value = true
  Object.assign(form, row || {
    toolTypeName: "",
    toolTypeId: 0
  })