v-if和v-show 導致elementui 表單驗證bug

使用el-form來做表單驗證時，有時候選擇的條件不同，展示的el-form-item也不一樣，
這時候就需要控制輸入框的展示與隱藏

 

特別是再tab標簽切換的時候遇到最多，每個tab下面顯示不通的el-form-item

我使用v-show時，提交表單時會遇到validate驗證不通過，因為雖然v-show=false了，但實際是渲染了dom的，也參與了表單驗證。

所以我又改成了v-if

改后又遇到另一個bug

相同的兩個el-form-item，有一個驗證失效，開始我還以為是prop沒有寫對，認真對比后發現，是正確的

，接着又繼續找解決辦法。。。。

最后是在el-form-item  上加key值解決的

上代碼：

 

 

key值保證唯一性就可以了

 

 

清空驗證：

 this.$nextTick(() => {

        this.$refs["discount_AddForm"].clearValidate();

      });

 

重置驗證表單：

  if (this.$refs["discount_AddForm"]) {

        //重置表單

       this.$refs["discount_AddForm"].resetFields();

         this.$refs["discount_AddForm"].clearValidate();

  }