VUE+element ui在做自定義表單校驗時，如何校驗表單內含有table的元素

問題

　　最近在做前端的vue項目，由於是臨時受命做前端，不是專業的，也是摸着石頭過河，公司采用的是vue+element ui，碰到了表單里面包含一個table，需要在提交時校驗table中是否有數據，在參照了element官網和async-validator的github后解決了。在此做個隨筆，方便后面如果有類似問題可以查閱。

解決過程

　　先上圖：

　　

 

 

　　就是包含這么個table，添加了校驗規則后，設置required為true后，前面后有一個紅色的星號樣式，同樣的，校驗不通過后會在當前元素的下方提示message信息

　　還未添加元素時不做校驗，所以沒有提示信息，增刪元素后，提交時才會校驗

　　

 

 　　刪除后

　　

 

 

具體代碼

　　

formRules: {
        relation: [
          { required: true, message: '請選擇作業流!', trigger: 'change' },
          {
            validator: (rule, value) => {
              if (value.length > 0) {
                return true
              } else {
                return false
              }
            },
          },
        ],
      },

　　這是校驗規則，其中validator需要用箭頭函數去編寫，內部進行校驗邏輯，還有一些參數可以參考官方文檔說明

　　因為table中還含有刪除操作，所以刪除后還需要去手動調用一次校驗，這一點官方文檔中提供了api，可以參照，本例中使用方式如下

this.$nextTick(() => {
        this.$refs[this.formRef]&&this.$refs[this.formRef].validateField('relation')
})

　　這樣就可達成校驗效果。