vue3+element-plus表单重置resetFields方法不生效

  • 说明 :resetFields方法的作用 重置该表单项,将其值重置为初始值,并移除校验结果

  • 使用方法

  • 1.给最外层的el-form加ref值,并双向绑定mode值,每个el-form-item必须需要绑定prop属性,否则不生效

  <el-form inline ref="fromRef" :model="file">
        <el-row :gutter="20">
          <el-col :xs="8" :sm="6">
            <el-form-item label="文件路径" prop="file_path">
              <el-input v-model="file.file_path" placeholder="请输入文件路径" />
            </el-form-item>
          </el-col>
        </el-form>
## js代码
let fromRef = ref();

最后在重置按钮事件中调用该方法即可

let rest = () => {
  fromRef.value.resetFields(); //重置该表单项,将其值重置为初始值,并移除校验结果
  getFile(); //调用接口,刷星页面
};

注意: 如果还是没能清空表单项,需要确认表单是否有初始值,或者某个地方改变了初始值,如果你点编辑,第一次打开弹框给表单绑定了model值,这个时候model的初始值就是你所赋值的值,所以resetFields的时候,会将mode对应的每个值重置到初始值,这时候的初始值就是你编辑时赋值的那个值,而不是data里声名的初始值,解决方法是:等弹出框已经初始化mounted之后再给model赋值,代码如下

let userEdit = (row: any) => {
  drawer.value = true;
  //存储收集已有的账号信息 
  nextTick(()=>{
  //在这里开始进行赋值
    Object.assign(userParams, row);
  })
};
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐