使用antd的a-form写一个表单,其中script部分:<script lang="ts" setup>;vue3
时间: 2024-02-14 22:24:50 浏览: 27
当您使用Ant Design (antd)的a-form来编写一个表单时,可以按照以下示例进行操作:
```vue
<template>
<a-form :form="form" @submit="handleSubmit">
<a-form-item label="姓名" name="name" rules="required">
<a-input v-model="form.name"></a-input>
</a-form-item>
<a-form-item label="年龄" name="age" rules="required|number">
<a-input-number v-model="form.age"></a-input-number>
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit">提交</a-button>
</a-form-item>
</a-form>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Form, Input, InputNumber, Button } from 'ant-design-vue';
const form = ref(null);
const handleSubmit = () => {
form.value.validateFields((errors, values) => {
if (!errors) {
// 在这里处理表单提交逻辑
console.log(values);
}
});
};
</script>
```
在上述代码中,我们使用了Vue 3和TypeScript,并且引入了Ant Design的Form、Input、InputNumber和Button组件。`form`是一个ref对象,用于存储表单的引用。`handleSubmit`方法用于处理表单提交事件,通过调用`validateFields`方法来验证表单数据。
需要注意的是,以上代码只是一个示例,您可以根据您的实际需求进行调整和扩展。