1.首先我们要拿到所有搜框内最新输入的东西

2.更改我们搜索框中相关配置选项，使我们内容相对应

import {IForm} from '@/base-ui/from'
  const searchFormConfig:IForm= {
  // 决定文字的宽度
   labelWidth:'120px',
  // 决定输入框的之间的边距
  itemStyle:{
   padding:"20px 60px"
   },
    // 定义搜索框的类型
    formItems:[
     {
      field:'name',
       type:"input",
       label:'用户名',
       placeholder:'请输入用户名'
     },
      {
      field:'realname',
       type:'input',
       label:'真实姓名',
       placeholder:'请输入用户真实姓名'
     },
     {
      field:'cellphone',
       type:'input',
       label:'电话号码',
       placeholder:'请输入电话号码'
     },
     {
       field:'enable',
       type:"select",
       label:'用户状态',
       placeholder:'请选择用户状态',
       options:[
         {title:'启用',value:1},
         {title:'禁用',value:0}
       ]
     },
      {
      field:"createAt",
       type:'datepicker',
       label:'创建时间',
       otherOptions:{
         startPlaceholder:"开始时间",
         endPlaceholder:"结束时间",
         type:"daterange"
       }
     }
   ]
   }
export default searchFormConfig

效果展示：

第3步： 监听这个搜索按钮：

   <el-button type="primary" @click="handleQueryClick">搜索el-button>

第4步：然后在下面做一个实现：当用户点击的时候

注意点：

第一点：像在setup 里面的代码只能发送一次网络请求，有点类似于组件的create就是在组件创建的时候调用一次

第二点：圈起来的代码，应该不只执行一次，应该执行很多次的

 第三点：将这个网络请求可以写成一个方法，每次只要调用这个方法就可以发一次网络请求

第四点：user页面有一个page-search 的组件 和 一个page-content 的组件，pageData的函数在pageContent 的里面的，搜索按钮是在page-search 的，就意味着在page-search.vue 页面点击搜索按钮时，需要在page-content.vue 页面调用一次 pageData 这个函数。

可以做样做：

      1.当点击了搜索按钮之后，把这个事件传给user 页面

      2.因为user.vue 组件是这两个组件的父组件

      3.在由父组件去调用这个方法

第五点：在page-search.vue 发出一个事件

 第六点：在user 父组件中监听这两个事件（重置，搜索）

  <page-search :searchFormConfig="searchFormConfig" 
    @resetBtnClick="handleResetClick"
    @queryBtnClick="handleQueryClick"
    >page-search>

第七点：拿到page-contents 组件对象，去调用这个组件的对象的内部方法

第八点：通过ref 拿到这个组件对象

 第九点：拿到这个组件对象，重置和搜索都去调用组件内的方法

 第十点：在搜索事件里面调用这个方法的时候的时候把参数也传过去

第十一点：在page-content 页面，在getPageData函数里面接收传过来的参数，在用展开运算符将里面的属性全部都拿到，然后放到queryInfo 里面。

 

优化

1.例如这段代码在以下组件中都会用到

2.我们可以单独的把他封装成一个hook

•  在src/ hooks/usePageSearch 文件
• 然后将上面框中的代码剪贴到到这个文件中来
• 

到时候直接在user 组件中调用这个方法就可以了

效果展示：