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

小王讨厌洋葱

已于 2023-05-09 17:38:08 修改

阅读量1.8k

点赞数 2

文章标签： vue.js javascript 前端

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

本文链接：https://blog.csdn.net/wsdnnnnnnnnn/article/details/130584246

版权

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