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')
})

　　这样就可达成校验效果。