el-form的resetFields()谷歌浏览器有效,在火狐浏览器失效不清空

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

猜你喜欢

转载自blog.csdn.net/tt18473481961/article/details/134501650