resetFields()准确的来说不是清空功能
它会把表单重置为“初始值”。这个初始值在表单的mounted
生命周期阶段就已经确定。如果创建表单时设置了默认值(例如,当功能是编辑表单而不是新建表单时),那么重置表单将无法置空,而是会将表单重置为该默认值。
比如我们在data中初始表单的初始值:
costCenterForm: {
name: '',
code: '',
division:[],
owner:''
},
如果我们有一个弹窗内的表单,编辑的时候,我们首先需要显示弹窗,然后再为表单赋值。否则,当关闭弹窗时,调用表单的.resetFields()
方法将无法将表单初始化为data
中的初始数据。
this.costCenterDialogVisible = true // 先显示弹窗
// 给form表单赋值
this.$nextTick(() => {
this.costCenterForm= {
name: '这是名字',
code: '123',
division:[],
owner:''
}
})
关闭弹窗+重置form:
this.costCenterDialogVisible = false
this.$refs.costCenterFormRef?.clearValidate()
this.$refs.costCenterFormRef?.resetFields()