2回答

河畔一角

2021-07-03

已采纳

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

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

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

0

0

zhangjed

提问者

2021-07-01

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

})};

0

1

河畔一角

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

2021-07-03

共1条回复