关于this.$refs[name].resetFields();

最新推荐文章于 2025-07-09 17:09:36 发布

原创最新推荐文章于 2025-07-09 17:09:36 发布 · 1w 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细介绍了Element UI框架中的Form组件用法，包括必须设置的ref属性、model绑定，以及FormItem中的prop属性。通过具体代码示例，展示了如何创建输入框、按钮等元素，并实现表单重置功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Form必须要有ref属性
2.Form必须绑定：model

<Form ref="submitUser" :model="submitUser">
</FormItem>

3.Form的FormItem中必须要有prop属性

<FormItem prop="realName">
</FormItem>

下面附上代码：
html部分：

<Form ref="submitUser" :model="submitUser">
	<FormItem prop="realName">
		<Input type="text" v-model="submitUser.realName" placeholder="姓名"></Input>
	</FormItem>
	<FormItem prop="identityNuber">
		<Input type="text" v-model="submitUser.identityNumber" placeholder="身份证号码"></Input>
	</FormItem>
	<FormItem prop="mobileNumber">
		<Input type="text" v-model="submitUser.mobileNumber" placeholder="手机号码"></Input>
	</FormItem>
	<FormItem prop="telePhoneNumber">
		<Input type="text" v-model="submitUser.telePhoneNumber" placeholder="固定号码"></Input>
	</FormItem>
	<FormItem>
		<Button type="info" @click="query">查询</Button>
		<Button @click="handleReset('submitUser')" style="margin-left: 8px;" type="info">Reset</Button>
	</FormItem>
</Form>

javascript部分：

<script>
    export default {
    	data () {
            return {
		submitUser:{
			realName:'',
			identityNumber:'',
			mobileNumber:'',
			telePhoneNumber:''
		},
		queryUser:{
			domicile:'',
			currentAddress:'',
			familyStatus:'',
			workStatus:'',
			emergencyContact:'',
			familyContact:'',
			familyContactRelationShip:'',
			familyContactPhone:'',
			contactPerson:'',
			contactPersonRelationShip:'',
			contactPersonPhone:'',
			familyNum:'',
			permanentResidence:'',
			familyIncome:'',
			sourceIncome:'',
			illInfo:'',
			heartIll:'',
			highBlood:'',
			stroke:'',
			asthma:'',
			healthFile:'',
			hospital:'',
			hospitalPhone:'',
			belongProperty:'',
			propertyName:'',
			propertyPhone:'',
			area:'',
			streetJW:'',
			JWPhone:'',
			belongStreetPhone:'',
			belongPolice:'',
			belongPoliceMan:'',
			belongPoliceManPhone:'',
			intersection:'',
			building:'',
			postalCode:'',
			workUnit:'',
			workPhone:'',
			workLinkMan:'',
			uselanguage:'',
			userType:'',
			description:'',
			user:{
			realName:'',
			sex:'',
			birthday:'',
			mobileNumber:'',
			telePhoneNumber:'',
			headImage:'',
			identityNumber:'',
			createDate:''
			}
		}
            }
        },
        methods:{
		handleReset (name) {
			this.$refs[name].resetFields();
		}
	}
    }
</script>

如有不对后续会继续更改。