1.创建搜索组件

• 新建 src/views/admin/user/components/user-search.vue用户搜索组件，内容如下：

 <template>
   <div class="search-height">
     <el-form label-width="72px">
       <el-row :gutter="8">
         <el-col :span="6">
           <el-form-item label="用户名">
             <el-input
                 clearable
                 v-model.trim="form.username"
                 placeholder="请输入"
             />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="手机号">
             <el-input
                 clearable
                 v-model.trim="form.phone"
                 placeholder="请输入"
             />
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="性别">
             <el-select v-model="form.sex" placeholder="Select" style="width: 240px">
               <el-option
                   v-for="item in selectOpt"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value"
               />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label-width="16px">
             <el-button type="primary" @click="search">查询</el-button>
             <el-button @click="reset">重置</el-button>
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
   </div>
 </template>
 
 <script setup>
   import { reactive, ref } from 'vue'
 
   // 表单对象
   const form = reactive({
     username: '',
     phone: '',
     sex: void 0,
   })
 
   //性别选项
   const selectOpt = [
     { value: 1, label: '男' },
     { value: 2, label: '女' },
     { value: 3, label: '保密' }
   ]
 
   //搜索
   const search = () => {
     console.log("search")
   }
 
   //重置
   const reset = () => {}
 
 </script>
 
 <style scoped>
   .search-height {
     line-height: 50px;
   }
   .el-form-item {
     margin-bottom: 0 !important;
   }
 </style> 

2. 将组件导入

• 将组件导入用户列表页 src/views/admin/user/index.vue中，代码如下：

  ...以上代码省略...
 
 <!--搜索-->
 <el-card style="width: 100%" shadow="never">
   <UserSearch /> // [!code highlight]
 </el-card>
 <!--列表-->
 
 ...以下代码省略...

3.封装全局表单hook

• 创建 src/utils/form-data.js，主要用于各组件表单的“赋值”、“重置”与“初始化”这种频繁的表单项的书写，代码如下：

 import { reactive } from 'vue'
 
 /**
  * 表单数据hook
  * @param initValue 默认值
  */
 export const useFormData = (initValue) => {
   /** 表单数据 */
   const form = reactive({ ...initValue });
 
   /** 重置为初始值 */
   const resetFields = (field) => {
     const keys = Object.keys(form);
     if (typeof field === 'string' && field) {
       if (keys.includes(field)) {
         form[field] = initValue ? initValue[field] : void 0;
       }
       return;
     }
     keys.forEach((key) => {
       form[key] = initValue ? initValue[key] : void 0;
     });
   };
 
   /** 赋值不改变字段 */
   const assignFields = (data, excludes) => {
     Object.keys(form).forEach((key) => {
       if (!excludes?.includes?.(key)) {
         form[key] = data[key];
       }
     });
   };
 
   /** 赋值某字段 */
   const setFieldValue = (field, value) => {
     form[field] = value;
   };
 
   const result = [form, resetFields, assignFields, setFieldValue];
   // 支持对象解构以兼容旧版
   Object.assign(result, {
     form,
     resetFields,
     assignFields
   });
   return result;
 }