el-dialog中的编辑新增有问题

Question

点编辑=>取消=>新增（新增表上没有数据）
点编辑=>点右上方的×（或者左击空白区域）=>新增（新增表上有编辑的数据）

查了一下资料好像是el-dialog关闭时销毁 DOM 内容，试了很久没能弄好，请问这个bug怎么修复？

Answer 1

河畔一角 2021-07-03 09:41:38

整理的很不错，相信你通过本次的自问自答，能进一步加深你对这个问题的理解。

记住两个方面：
1、编辑的时候，通过nextTick去初始化数据。
2、关闭的时候，及时重置表单。

只不过这个过程中可能会遇到其他问题，比如你这次封装了一个add-edit-form插件，导致重置的时候需要通过ref好几层的调用，这个只是实现过程，实现方法就是上面说的两步

Answer 2

提问者 zhangjed 2021-07-01 18:09:58

在el-dialog上加Dialog 关闭的回调@close='closeDialog'，在回调函数上重置表单

如<el-dialog title="员工新增" v-model="showModal" @close='closeDialog'></el-dialog>

const closeDialog = () => {handleReset("dialogForm");};

如果el-dialog的表单是自定义子组件表单，父组件无法直接获取子组件表单的ref属性，但是可以通过父组件的ref去获取子组件的ref进而重置表单，如

<el-dialog title="供应商新增" v-model="showModal" @close='closeDialog'>

<add-edit-form ref="supplierForm" :form="addEditForm" v-model="addModels" @handleClose="handleClose"

@handleSubmit="handleSubmit" />

</el-dialog>

const closeDialog = () => {

ctx.$nextTick(() => {

ctx.$refs.supplierForm.$refs.addEditForm.resetFields();

})};

• 河畔一角 #1

  整理的很不错，相信你通过本次的自问自答，能进一步加深你对这个问题的理解。
  
  记住两个方面：
  1、编辑的时候，通过nextTick去初始化数据。
  2、关闭的时候，及时重置表单。
  
  只不过这个过程中可能会遇到其他问题，比如你这次封装了一个add-edit-form插件，导致重置的时候需要通过ref好几层的调用，这个只是实现过程，实现方法就是上面说的两步