一、前言
在Vue项目开发过程中，应用this.$refs[name].resetFields();实现表单搜索元素重置时发现失效。经检查发现是form-item绑定的属性prop与包裹元素el-input绑定值不一致造成的。现梳理有关应用this.$refs[name].resetFields();重置表单注意事项。
Form必须要有ref属性；Form必须绑定:model；
<Form ref="submitUser" :model="submitUser">
Form的FormItem中必须要有prop属性;
<FormItem prop="realName">
</FormItem>
Form包裹的元素绑定值需与FormItem中prop属性名称保持一致（可类比Form表单校验规则）
<Form ref="submitUser" :model="submitUser">
<FormItem prop="uname">
<Input type="text" v-model="submitUser.uname" placeholder="用户名"></Input>
</FormItem>
<FormItem prop="passwd">
<Input type="text" v-model="submitUser.passwd" placeholder="密码"></Input>
</FormItem>
<FormItem>
<Button type="info" @click="query">Login</Button>
<Button @click="handleReset('submitUser')" style="margin-left: 8px;" type="info">Reset</Button>
</FormItem>
</Form>
<script>
export default {
data () {
return {
submitUser:{
realName:'',
identityNumber:'',
mobileNumber:'',
telePhoneNumber:''
}
}
},
methods:{
handleReset (name) {
this.$refs[name].resetFields();
}
}
}
</script>
二、延伸阅读
项目开发过程中，需要实现操作栏位图标按钮与文字按钮切换效果，在实现文字按钮过程中，大致思路如下：操作栏位只展示前2个菜单，之后的菜单采用更多方式展示，通过点击更多展示其余菜单按钮。 实现代码如下：
<template slot-scope="scope">
<el-dropdown :split-button="false" trigger="click" type="text" @command="handleCommand" class="dropdown el-dropdown-link">
<span>
更多
<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown" v-if="!!user.hobbies && user.hobbies.length > 0">
<template v-for="item in user.hobbies">
<el-dropdown-item @click.native="toMethod(item.methodnm, scope.row)">{{ item.name }}</el-dropdown-item>
</template>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
methods: {
toMethod (methodnm, inputParam) {
switch (methodnm) {
case 'a':
aMethod(inputParam)
break
case 'b':
aMethod(inputParam)
break
...
}
}
}
}
</script>
