vue3 + ant desgin + form

<template>
  <Form name="ruleForm" ref="ruleForm" :model="formData" :rules="rules" class="form_s">
    <Form.Item label="配置名称" name="name">
      <Input v-model:value="formData.name" placeholder="请输入名称" :disabled="isDisabled" />
    </Form.Item>
    <Form.Item label="日期范围" name="date">
      <DatePicker.RangePicker
        v-model:value="formData.date"
        valueFormat="YYYY-MM-DD"
        format="YYYY-MM-DD"
        style="width: 100%"
      />
    </Form.Item>
    <Form.Item label="select" name="select">
      <Select
        allowClear
        showSearch
        :filterOption="false"
        v-model:value="formData.select"
        @search="(val) => handleFactor(val)"
        :disabled="isDisabled"
      >
        <Select.Option v-for="(item, i) in factorList" :key="i" :value="item.id">{{
          item.name
        }}</Select.Option>
      </Select>
    </Form.Item>
    <Form.Item label="num" name="num">
      <InputNumber v-model:value="formData.num" :disabled="isDisabled" />
    </Form.Item>
  </Form>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { Form, Input, Select, DatePicker, InputNumber } from 'ant-design-vue';

  const isDisabled = ref(false);
  const formData = ref<any>({});
  const rules = {
    name: [{ required: true, message: '请输入name', trigger: 'blur' }],
    date: [{ required: true, message: '请选择日期范围', trigger: 'change' }],
    select: [{ required: true, message: '请选择select', trigger: 'change' }],
    num: [{ required: true, message: '请输入num', type: 'number', trigger: 'blur' }],
  };
  const factorList = ref<any>([]);
  function handleFactor(val) {}
  const ruleForm = ref<any>(null);
  async function handleSubmit() {
    try {
      await ruleForm.value.validate();
      const values = formData.value;
      console.log(values);
    } finally {
      console.log('err');
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep.form_s {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .ant-form-item {
      width: 50%;
    }

    .ant-form-item-label {
      width: 110px;
    }
  }
</style>