vue3+ant design vue实现表单校验记载清空 - ToB企服应用市场:ToB评测及商务社交产业平台

<a-modal v-model:open="open" title="心愿形式新增:" :footer="null" @cancel="cancel">
<div>
<a-form
ref="form"
:model="formStateAdd"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 16 }"
>
<a-row :gutter="[16, 24]">
<a-col :span="16">
<a-form-item
name="name"
label="样式名称"
labelAlign="left"
:rules="[{ required: true, message: '请输入样式名称', trigger: 'blur' }]"
>
<a-input
v-model:value="formStateAdd.name"
autocomplete="off"
placeholder="请输入样式名称"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="[16, 24]">
<a-col :span="16">
<a-form-item
name="upload"
label="文件"
labelAlign="left"
:rules="[{ required: true, message: '请上传文件', trigger: 'blur' }]"
>
<a-upload
v-model:file-list="fileList"
name="文件上传"
action=""
:customRequest="upDown"
:beforeUpload="beforeUpload"
@remove="removeFile"
>
<upload-outlined></upload-outlined>
</a-upload>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="[16, 24]">
<a-col :span="16">
<a-form-item
name="enableStatus"
label="状态"
labelAlign="left"
:rules="[{ required: true, message: '请选择状态', trigger: 'blur' }]"
>
<a-radio-group v-model:value="formStateAdd.enableStatus">
<a-radio value="1">启用</a-radio>
<a-radio value="2">禁用</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
</a-row>
</a-form>
</div>
<div class="div_btn">
<a-space>
<a-button type="primary" @click="submit">发布</a-button>
<a-button @click="cancel">取消</a-button>
</a-space>
</div>
</a-modal>
const form = ref(null);
//取消
const cancel = () => {
nextTick(() => {
open.value = false;
form.value.resetFields();
formStateAdd.value = { name: '', enableStatus: '' };
fileList.value = [];
});
};

复制代码