后台管理----搜索框重置功能

1.在搜索组件里 重置按钮 监听一个事件

<!-- page-search.vue --> 
<div class="page-search"> 
 <!-- 将配置传给子组件 --> 
<hy-from v-bind="searchFormConfig" v-model="formData"> 
<template #header>
  <h3>高级检索</h3> 
</template>  
<template #footer> 
<div class="handle-btn"> 
<el-button type="primary">搜索</el-button> 
<el-button type="primary" @click="handleResetClick">重置</el-button> 
</div> 
</template>
</hy-from>
</div>

2.当用户点击完之后将搜索框的表做一个重置

import { defineComponent,ref} from 'vue'import HyFrom from '@/base-ui/from'
//接收相关的配置
  props:{searchFormConfig:{  type:Object,  required:true}},//因为双向绑定的属性的属性应该是由配置文件中的filed来决定的
//优化1:formData 中的属性应该是动态决定的，通过在setup 里面传入props可以拿到上一层的数据
setup(props){
const formItems=props.searchFormConfig?.fromItems??[]
const fromOrignData:any={}
//遍历里面的每一项值
for(const item of fromItems){ //遍历数组
formOrignData[item.filed]='' //将全部的配置中filed 添加到这个对象里面去，设置值为''
}
//在将这个最新的formOrignData 赋值给 formData
const formData=ref(formOrignData)
}

3.监听重置这个事件：

优化2:当用户点击了重置的时候：就是把formData 里面赋的值，在设置回原始的对象formOrignData

const handleResetClick=()=>{
//当我们点击重置的时候拿到了所有formOrginData 里面的key
for(const key in fromOrginData){
//通过这个key去取到它所有的值，直接去修改fromData 里面的某个属性
fromData.value[`${key}`]=formOrignData[key]
}
}