在 useForm中拿到一个validateInfos,并传入formData和rules,在FormItem中绑定name名
完整代码如下
<template>
<Form class="enter-x pt-4" :model="formData" ref="formRef">
<Row>
<Col class="mb-3" :span="24">
<FormItem class="w-24 inline-block align-middle mb-0 mr-3" v-bind="validateInfos['sysOperElectric.green_min_rate']">
<InputNumber
v-model:value="formData.sysOperElectric.green_min_rate"
:placeholder="t('routes.operConfig.min')"
/>
</FormItem>
<span class="mx-2 text-sm text-slate-400">~</span>
<FormItem class="w-24 inline-block align-middle mb-0 mr-3" v-bind="validateInfos['sysOperElectric.green_max_rate']">
<InputNumber
v-model:value="formData.sysOperElectric.green_max_rate"
:placeholder="t('routes.operConfig.max')"
/>
</FormItem>
</Col>
</Row>
</Form>
</template>
<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
})
}