Ant-design中表单多级对象做嵌套表单校验

在 useForm中拿到一个validateInfos，并传入formData和rules，在FormItem中绑定name名

完整代码如下

<script setup lang="ts">
  import { Card, Form, InputNumber, Button, Row, Col, Switch } from 'ant-design-vue';
  import { ref, reactive } from 'vue';
  import { cloneDeep } from 'lodash-es';
  import { integerRule } from '@/utils/validate';
 
  const FormItem = Form.Item;
  let formData = reactive({
    sysOperElectric: {
      greenMaxRate: undefined,
      greenMinRate: undefined,
      orangeMaxRate: undefined,
      orangeMinRate: undefined,
      redMaxRate: undefined,
      redMinRate: undefined,
    }
  })
 
  const useForm = Form.useForm;
  const { validateInfos, validate } = useForm(
    formData,
    reactive({
      'sysOperElectric.greenMaxRate': integerRule(),
      'sysOperElectric.greenMinRate': integerRule(),
    })
  )
  function handleSubmit() {
    validate().then((res) => {
        // submit
    })
  }