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

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);
  })
};