使用iview进行表单提交，因为页面使用axios（ajax封装而成）进行提交数据，所以页面不会刷新，也就不会清空表单中的数据，传统清除方法既慢又显得多余，那么iview有没有提供一种很可行的提交后清空表单的方式呢，答案是肯定的，接下来我们就来看看吧
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <Form ref="formFilter" :model="formFilter" inline :label-width="80"> <FormItem label="account" prop="account"> <Input type="text" v-model="formFilter.account" /> </FormItem> <FormItem label="a" prop="a"> <Input type="text" v-model="formFilter.a" /> </FormItem> <FormItem label="学号：" prop="b"> <Input type="text" v-model="formFilter.b" /> </FormItem> <FormItem> <Button @click="handleReset('formFilter')">重置</Button> </FormItem> </Form> data(){ return { formFilter: {} } } methods: { handleReset (name) { // 或者手动将各个属性置空 // 提交后清空 console.log('提交后清空') console.log(this.formFilter) this.$refs.formFilter.resetFields() } } |
第一种： this.$refs.formFilter.resetFields()
第二种: this.$refs[name].resetFields()
「梦想一旦被付诸行动，就会变得神圣，如果觉得我的文章对您有用，请帮助本站成长」
上一篇：canvas刮刮卡最终解决方案
下一篇：利用c3实现页面延迟加载
最新评论
国瑞个人博客: https://www.huanggr.cn/，我们关注Web前端开发技术，web前端开发,移动前端开发，前端资讯，同时分享前端资源和工具等，期待你的参与,了解更多..
博主独立研发主题：
没咋研究，emmm
评：web前端绘制八卦图_超简单教程这个是太极阴阳鱼，不是八卦图。
评：web前端绘制八卦图_超简单教程
后会有期（1年前 (2020-08-14)）文章不错
评：宝塔系统面板无法正常显示我采用该方法解决了才发布的教程
评：iview-admin点击路由报错vue-router.esm.js?8c4f:2007 Uncaught (in promise) NavigationDuplicated {_name: "Navi网站被攻击了，有些源码文件损坏了
评：前端搜索框下方保留搜索记录
12（2年前 (2020-03-11)）为什么我的foreach会报错 Error in v-on handler: "TypeE...
评：iview中多选框单选实现方法
1