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