iview form表单resetFields方法不起作用

最新推荐文章于 2023-10-07 15:51:42 发布

原创最新推荐文章于 2023-10-07 15:51:42 发布 · 6.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#iview resetFields不生效

vue 专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍如何在Vue中使用resetFields方法对表单进行清空重置，包括Form组件的ref属性设置、FormItem包裹表单元素及正确使用prop属性等关键步骤。

<template>
   <Form ref="form1" :model="formItem" :label-width="60">
       <FormItem label="名称" prop="title">
           <Input v-model="formItem.title"/>
       </FormItem>
  </Form>
  <Button @click="reset">重置</Button>
</template>
<script>
    export default {
    	data () {
            return {
                formItem: {
                    title: ''
                }
            }
         },
         methods: {
		 	reset(){
				this.$refs.form1.resetFields();
			}
		 }
    }
</script>

使用resetFields对form进行清空重置有以下三点需要注意：

Form 使用ref="form1"以便方法中进行引用
需要重置的表单元素使用FormItem包裹
FormItem标签中的prop属性需要填写对应表单域 model 里的字段
由于Form标签的:model="formItem"，所以prop直接写title即可，对应data中的
formItem.title