el-tree在el-form中通过rules进行校验

背景

如下图，在el-form中想实现el-tree的校验，elementUI并没有提供相关的示例。

image.png

按照通常的方法配置rules,无论是否选择el-tree的选项，都会报错提示请选择，这说明如果按照这种方法来配置el-tree的rules是不行的

//正常配置
FormRules: {
  trees: { required: true, message: '请选择', trigger: 'change' },
}

正确配置el-tree的rules校验

通过自定义validator实现el-tree的校验。如下代码所示：

1. el-form绑定校验rules: FormRules
2. 给el-tree绑定ref为tree
3. 自定义FormRules中关于el-tree的校验
4. 通过this.$refs.tree.getCheckedKeys()获取el-tree选择的项