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

背景

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

按照通常的方法配置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选择的项

<template>
  <div class="">
    <el-form ref="FormData" :model="FormData" label-width="100px" :rules="FormRules">
     <el-form-item label="权益内容" prop="trees">
      <el-tree
        :data="treeOrg"
        :default-checked-keys="FormData.trees"
        :expand-on-click-node="true"
        :props="treeOrgProps"
        accordion
        node-key="chargingModuleId"
        ref="tree"
        show-checkbox
        @check-change="handleCheckChange"
      ></el-tree>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      formData: { trees: [] },
      FormRules: {
        trees: [{ required: true, message: '请选择', trigger: 'change' }]
      },
      treeOrg: [
        {
          code: 'S',
          value: '数学',
          chargingModuleId: null,
          child: [
            {
              code: 1,
              value: '高一',
              chargingModuleId: null,
              child: [
                { code: 1, value: '暑假', chargingModuleId: 1, child: null, disabled: false },
                { code: 1, value: '秋季', chargingModuleId: 20, child: null, disabled: false },
                { code: 1, value: '寒假', chargingModuleId: 21, child: null, disabled: false },
                { code: 1, value: '春季', chargingModuleId: 22, child: null, disabled: false }
              ],
              disabled: false
            },
            {
              code: 12,
              value: '高二',
              chargingModuleId: null,
              child: [
                { code: 12, value: '暑假', chargingModuleId: 23, child: null, disabled: false },
                { code: 12, value: '秋季', chargingModuleId: 24, child: null, disabled: false },
                { code: 12, value: '寒假', chargingModuleId: 25, child: null, disabled: false },
                { code: 12, value: '春季', chargingModuleId: 41, child: null, disabled: false }
              ],
              disabled: false
            }
          ],
          disabled: false
        },
        {
          code: 'E',
          value: '英语',
          chargingModuleId: null,
          child: [
            {
              code: 3,
              value: '高考备考',
              chargingModuleId: null,
              child: [{ code: 3, value: '基础专题', chargingModuleId: 8, child: null, disabled: false }],
              disabled: false
            }
          ],
          disabled: false
        }
      ],
      treeOrgProps: {
        children: 'child',
        label: 'value'
      }
    }
  },
  methods: {
    handleCheckChange() {
      this.FormData.trees = this.$refs.tree.getCheckedKeys(true)
    }
  }
}
</script>
<style lang="scss" scoped></style>