背景

如下圖，在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選擇的項

<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>