vue之this.$refs[formName].resetFields()

 

你的form要满足如下形式才能够真正使用resetFields：

• Form 必须定义 ref 属性
• From 必须绑定 model
• From 的 FormItem 中有 prop 属性
• model 中绑定的属性与 prop 中相同

<Form ref="ruleForm" :model="ruleForm">
    <FormItem prop="realName">
        <Input type="text" v-model="ruleForm.realName" placeholder="真实姓名"></Input>
    </FormItem>
    <FormItem prop="telNumber">
        <Input type="text" v-model="ruleForm.telNumber" placeholder="电话号码"></Input>
    </FormItem>
    <Button @click="handleReset('ruleForm')">Reset</Button>
</Form>
<script>
    export default {
        data () {
            return {
                ruleForm:{
                    realName:'',
                    telNumber:''
                }
            }
        },
        methods:{
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        }
    }
</script>

 

 

还有一种场景：

因为 this.$refs[formName].resetFields() 方法是重置表单到初始值，而不是清空表单。所以当表单在第一次渲染时所有的数据就是初始数据。

如果在初始化的时候给表单数据赋值了 'something'，则每次 resetFields() 方法后数据不是 data 中的 '' ，而是初始化的那个值 'something'。

 

解决方法：

即在下次 dom 更新循环结束后执行回调，以此来使 '' 成为属性的初始值而不是 'something'。即 this.form.something 先被初始化为 ''，之后再被赋值 ’something’。

openDialog(){
    this.$nextTick( () => {
        this.form.something = 'something'
    })
}

 

nextTick 定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。理解：nextTick()，是将回调函数延迟在下一次 DOM 更新数据后调用。简单的理解是：当数据更新了，在 DOM 中渲染后，自动执行该函数。

nextTick理解：https://blog.csdn.net/zhouzuoluo/article/details/84752280