ant-design-vue之中＜a-form＞表单清空

如果我们给<a-form>绑定的ref为formRef ,绑定的数据值为formState。

<template>
   <div>
     <a-form  ref="formRef" :model="formState">
       <a-form-item  label="名字">
           <a-input v-model:value="formState.name" />
       </a-form-item>
       <a-form-item label="地址">
           <a-input v-model:value="formState.adress" />
       </a-form-item>
     </a-form>

      <a-button type="primary" @click="reset">重置<a-button>
   </div>
</template>

清空表单的数据值要从两个地方清空 

<script setup>

import {ref,reactive} from 'vue' 

const formState = reactive({
   name:"",
   adress:''

})

//点击重置按钮清空，要分别从绑定的ref调用resetRields()函数以及绑定的数据值formState清空
//这样才能达到真正清空的目的
const reset = () => {
 formRef.value.resetFields();//resetFields()函数是组件库提供的
 formState.value = null;
}

</script>