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

关于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)

因为百度不到相关内容,暂时我只知道这样解决,如果有其他好的办法希望大佬多多指教!!