Element-Ui表單移除校驗clearValidate和resetFields的區別

1、介紹

2、resetFields()與clearValidate()的區別

　　相同點：二者都能移除表單校驗

　　不同點：resetFields()會對整個表單進行重置，將所有的字段重置為初始值

　　　　　　clearValidate() 只會移除表單校驗，而且可以只對部分字段進行移除校驗

3、resetFields()與clearValidate()的使用場景

　　resetFields()會移除表單校驗並初始化表單，一般用於新增

　　clearValidate()移除全部或部分表單校驗，一般用於修改、編制

4、resetFields和clearValidate的用法

　　兩者用法基本一致

　　this.$refs.form.resetFields();

　　this.$refs['form'].resetFields();

　　this.$refs.form.clearValidate();

　　this.$refs['form'].clearValidate();

　　this.$refs.form.clearValidate("a");

　　this.$refs.form.clearValidate(["b","c"]);

5、注意事項

　　1、resetFields()會重置字段值，而在vue中大量用到的數據的綁定，很可能出現同一個數據綁定在多處的情況，如果濫用resetFields很可能造成界面上出現莫名的bug
　　// 下圖為我項目中的bug

　　　　　　

　　左邊的樹和右邊的表單用了綁定了相同的數據，點擊左邊樹的每個節點可以在右邊進行編輯，右邊點擊保存
　　會對數據進行校驗，左邊樹結構每次點擊不同節點都要重置校驗，我誤用了resetFields，造成了會去重置倉庫> 大樓數據為空,然后再次左邊樹結構的數據消失，變為空白。

　　2、添加和修改公用一個彈窗，點擊添加彈窗后，如果沒移除表單校驗的話，再點擊修改彈窗時校驗就會被記住，所以需要移除校驗，但在清空表單校驗時會報如下錯誤：

　　

　　解決方案：

this.$nextTick(()=>{
   this.$refs.form.resetFields();  
})