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

原创已于 2023-05-09 17:38:08 修改 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-05-09 17:24:49 首次发布

该文章展示了如何在Vue应用中重置<a-form>组件的表单数据。通过结合使用ref绑定的formRef调用resetFields方法以及将formState设置为null，可以确保表单的所有字段被完全清空。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果我们给<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>