vue3+ant弹窗表单关闭后清空表单数据

1、:footer="false"   去除对话框底部footer部分

2、使用a-form表单点击取消按钮将表单数据清空，使用ref先定义表单名

3、表单点击确定按钮验证必填是否填写

​
<a-modal width="50%" :footer="false" v-model:visible="state.visible" title-align="start" :title="state.id ? '编辑轴承' : '新建轴承'" @cancel="handleCancel">
	<a-form ref="formRef" :model="addFrom" @submit="handleSubmit">
		<div class="title">基本信息</div>
		<a-form-item field="name" label="名称:" :rules="[{required:true,message:'请输入名称'}]" label-col-flex="80px">
			<a-input v-model="addFrom.name" placeholder="请输入" />
		</a-form-item>
		<a-form-item field="age" label="年龄:" :rules="[{required:true,message:'请输入年龄'}]" label-col-flex="80px">
			<a-input v-model="addFrom.age" placeholder="请输入" />
		</a-form-item>
		<div style="text-align: center;">
			<a-space>
				<a-button @click="handleCancel()">取消</a-button>
				<a-button type="primary" html-type="submit">确定</a-button>
			</a-space>
		</div>
	</a-form>
</a-modal>

​

import {reactive, ref} from 'vue';

const formRef = ref(); // 定义a-form表单的ref名
const addFrom = reactive({
    name: '',
    age: ''
})


// 弹窗表单关闭后的回调事件，清空表单数据
const handleCancel = () => {
	state.visible = false;
	formRef.value.resetFields();
}


// 确认提交的回调时间，验证表单必填项
const handleSubmit = ({values, errors}: any) => {
	console.log('values:', values, '\nerrors:', errors)
	if(!errors) {
			
	}
}

效果如下：