關於iview、element-ui重置表單並清除校驗的方法

平時在使用iview或者vue重置表單是時，我會習慣使用

this.$refs[formData].resetFields();

但是直接這樣寫上去方法是不起作用的，

內容必須要在每個form-item里加上prop屬性，並且與你v-model的值相同才可以生效

例如:

iview代碼段： 

<Modal v-model="showDialog" :title="modalTitle" :mask-closable="false">
    <Form  ref="formData" :model="formData" :rules="ruleValidate" label-position="top">
        <FormItem label="姓名：" prop="name">
             <Input type="text" v-model="formData.name"/>
         </FormItem>
         <FormItem label="年齡：" prop="age">
             <Input type="text" v-model="formData.age"/>
         </FormItem>
    </Form>
    <div slot="footer">
        <Button type="text"  @click="cancel('ruleValidate')">取消</Button>
        <Button type="primary" @click="Save('ruleValidate')">保存</Button>
     </div>
</Modal>

或者

<Modal v-model="showDialog" :title="modalTitle" :mask-closable="false" @on-ok='save' @on-cancel="cancel">
    <Form  ref="formData" :model="formData" :rules="ruleValidate" label-position="top">
        <FormItem label="姓名：" prop="name">
             <Input type="text" v-model="formData.name"/>
         </FormItem>
         <FormItem label="年齡：" prop="age">
             <Input type="text" v-model="formData.age"/>
         </FormItem>
    </Form>
</Modal>

只需在關閉彈框的cancel方法中寫上重置表單的方法即可，例

  cancel() {
      this.$refs.formData.resetFields();
   }

后來發現重置表單清除校驗有另一種更為簡便的方法：

<Modal v-model="showDialog" :title="modalTitle" :mask-closable="false">
    <Form v-if="showDialog" ref="formData" :model="formData" :rules="ruleValidate" label-position="top">
        <FormItem label="姓名：" prop="name">
             <Input type="text" v-model="formData.name"/>
         </FormItem>
         <FormItem label="年齡：" prop="age">
             <Input type="text" v-model="formData.age"/>
         </FormItem>
    </Form>
    <div slot="footer">
        <Button type="text"  @click="cancel('ruleValidate')">取消</Button>
        <Button type="primary" @click="Save('ruleValidate')">保存</Button>
     </div>
</Modal>

只需要在From標簽上加上v-if="showDialog"這句代碼，當關閉彈框時showDialog=false，

再次打開彈框是showDialog置為true，這樣每次打開彈框它都會生成一個新的表單。