关于iview 中resetFields()方法的踩坑_iview resetfields-优快云博客

本文链接：https://blog.youkuaiyun.com/CHH_HE/article/details/105490285

本文深入探讨了iview UI框架中表单重置方法resetFields()的使用陷阱，特别是在modal对话框中结合动态数据更新的场景下。通过实例分析，指出直接调用resetFields()后立即修改表单字段值会遇到的问题，并提供了一个通过设置定时器来解决该问题的有效方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于iview 中resetFields()方法的踩坑

首先看看iview官网对这个方法的介绍:对整个表单进行重置，将所有字段值重置为空并移除校验结果

我首先运用到了modal属性中添加modal的显示/不显示改变时触发modal中的表单重置

//html
<Modal
      v-model="addBWListModal"
      :title="addModalInfo.addTitle"
      :loading="addBWListloading"
      @on-ok="addBWListOk"
      @on-visible-change="stateChange"
      :mask-closable="false"
    >
      <Form ref="addBWListForm" :model="addBWListForm" :rules="ruleInline" :label-width="100">
        <FormItem label="车牌号" prop="CarNum">
          <Input type="text" v-model="addBWListForm.CarNum" placeholder="车牌号"></Input>
        </FormItem>
        <FormItem :label="addModalInfo.BWLabel" prop="reason">
          <Input type="text" v-model="addBWListForm.reason" :placeholder="addModalInfo.BWLabel"></Input>
        </FormItem>
      </Form>
    </Modal>
//js
stateChange() {
      this.$refs["addBWListForm"].resetFields();
    },

在这里插入图片描述
这样就可以实现上图点击取消或者关闭的时候将表单验证红字消除和input中的数据清除

但! 在之后的功能遇到了一个很坑的问题,如果你要在显示modal窗口的同时又要往modal中绑定的form中的input等地方修改他的值…在一个方法里是不能实现的(就算先改变modal的状态值(触发on-visible-change)再修改其中的值,值也为空)

 this.addBWListModal = true;
        this.addBWListForm.CarNum="666"

但!!可以设置定时器↓就可以完成功能的实现

this.addBWListModal = true;
      var that=this
      setTimeout(function () {
        that.addBWListForm.CarNum="粤B12345"
               
      },1000)