标签：refs 重置 弹框 ui showDialog element cancel 表单

this.$refs['activityForm'].resetFields();

只会重置之前表单的内容，并不会清空

只需在关闭弹框的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，这样每次打开弹框它都会生成一个新的表单。

标签：refs,重置,弹框,ui,showDialog,element,cancel,表单
来源： https://www.cnblogs.com/ckmouse/p/11968251.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。