huanggr
iview提交表单清空表单数据
使用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() } } |
首先有一些规则需要去遵守：
1、上述写在vue-cli的组件中，这样iview才能发挥清除效果，使用外链引入也可以实现，不过这里不演示
2、在使用的使用清除功能的时候，必须使用Form进行提交，里面添加一个ref属性，ref就是model绑定的属性
3、每个FormItem都需要绑定一个prop属性，它的值就是当前这一组中绑定的那个字段，例如FormItem的input中绑定的是v-model=”formFilter.a”，那么prop的值就为a
4、当我们使用点击事件触发清空表单的时候，有两种方式，一种是：
第一种： this.$refs.formFilter.resetFields()
第二种: this.$refs[name].resetFields()
1