需求：我們有兩個彈出框，這倆彈出框用的是一個元件（一個form表單），因為他們有相同的欄位，可能A彈框的欄位是最全的，B彈框是部分欄位，通過v-if根據不同的彈框控制顯示不同的欄位

A彈框：

B彈框

由於之前我們在一個form表單中通過:

this.$refs.rulesFormRef.validate(valid => {
  if(valid){
        .....你的邏輯      
    }  
}

這樣會把整個表單中所有新增校驗規則的全部校驗了，通過v-if隱藏掉是能解決欄位展示的問題，但是v-if從false變為true後，校驗會丟失。

解決辦法就是：

1. 對於動態的校驗的欄位加上v-if後，需要再新增key屬性（key的值保持在這個表單中的不同欄位間唯一性），解決校驗丟失問題

2.對錶單中的欄位進行動態分開校驗，不要再用之前的全部校驗

例：

第一步：

第二步：

核心程式碼：

sureFn(opt) {
      let vaitalArr = []
      const versionArr = ['versionCode', 'remark', 'stageId']
      const editArr = ['partName', 'partDrawNumber', 'partType', 'materialDataId', 'partCode']
      if (opt === 'add') {
        vaitalArr = vaitalArr.concat(editArr, versionArr)
      } 
 
else if (opt === 'edit') {
        vaitalArr = editArr
      } else if (opt === 'addVersion' || opt === 'editVersion') {
        vaitalArr = versionArr
      }
    
      Promise.all(
        vaitalArr.map(item => {
          return new Promise(resolve => {
            this.$refs.ruleForm.validateField(item, vaild => {
              resolve(vaild)
            })
          })
        })
      ).then(results 
 
=> {
        // 表單校驗通過
        results = results.filter(item => item)
        if (!results.length) {
         // 校驗通過後執行彈框業務邏輯
          if (opt === 'add') {
             //...彈框A邏輯
          } else if (opt === 'edit') {
            partsInfoUpdate(this.form).then(() => {
              //...彈框B邏輯
            })
          } else if (opt === 'addVersion') {
            //...彈框C邏輯
          } else if (opt === 'editVersion') {
           //...彈框D邏輯
          }
        }
      })
    },