前言 在后台管理系统中搜索区域SearchForm​ 几乎存在于每一个列表页中。如果不加以封装你的代码可能会变成这样el-form :inlinetrue :modelqueryParams el-form-item label用户名 el-input v-modelqueryParams.username placeholder请输入/el-input /el-form-item el-form-item label状态 el-select v-modelqueryParams.status placeholder请选择 el-option label启用 value1/el-option el-option label禁用 value0/el-option /el-select /el-form-item el-form-item el-button typeprimary clickhandleQuery搜索/el-button el-button clickresetQuery重置/el-button /el-form-item /el-form问题很明显 每个页面都要复制粘贴 样式、布局难以统一 新增/修改搜索项极其繁琐今天我们就来解决这个痛点封装一个高内聚、低耦合的SearchForm组件一、设计目标 我们要封装的组件需要具备以下特性配置驱动通过一个config数组即可生成表单项。内置类型支持input、select、date、daterange等常用类型。自动双向绑定无需手动v-model。一键重置内置重置逻辑。高度可定制支持传入el-form-item的任意原生属性。二、组件实现 (src/components/SearchForm/index.vue) ⚙️这是我们的核心代码请仔细看注释。template el-form refsearchFormRef :inlinetrue :modelmodel :label-widthlabelWidth classsearch-form template v-for(item, index) in config !-- 输入框 -- el-form-item v-ifitem.type input :keyindex :labelitem.label :propitem.prop el-input v-modelmodel[item.prop] :placeholderitem.placeholder || 请输入 :clearableitem.clearable ?? true :style{ width: item.width || 200px } / /el-form-item !-- 下拉框 -- el-form-item v-else-ifitem.type select :keyindex :labelitem.label :propitem.prop el-select v-modelmodel[item.prop] :placeholderitem.placeholder || 请选择 :clearableitem.clearable ?? true :style{ width: item.width || 200px } el-option v-foropt in item.options :keyopt.value :labelopt.label :valueopt.value / /el-select /el-form-item !-- 日期选择器 -- el-form-item v-else-ifitem.type date :keyindex :labelitem.label :propitem.prop el-date-picker v-modelmodel[item.prop] :typeitem.dateType || date :placeholderitem.placeholder || 请选择日期 :value-formatitem.valueFormat || yyyy-MM-dd :style{ width: item.width || 200px } / /el-form-item /template !-- 操作区 -- el-form-item classsearch-buttons el-button typeprimary iconel-icon-search clickhandleSearch 搜索 /el-button el-button iconel-icon-refresh clickhandleReset 重置 /el-button !-- 插槽用于扩展按钮 -- slot / /el-form-item /el-form /template script export default { name: SearchForm, props: { // 搜索配置数组 config: { type: Array, required: true, default: () [] }, // 搜索参数对象 (v-model) model: { type: Object, required: true }, // label宽度 labelWidth: { type: String, default: 80px } }, methods: { // 触发父组件的搜索事件 handleSearch() { this.$emit(search) }, // 重置表单 handleReset() { this.$refs.searchFormRef.resetFields() // 重置后自动触发一次搜索 this.$emit(search) } } } /script style scoped langscss .search-form { background-color: #fff; padding: 18px 20px 0; border-radius: 4px; margin-bottom: 16px; .search-buttons { margin-bottom: 18px; } } /style三、如何使用只需 3 步 Step 1引入并注册组件// 在页面组件中 import SearchForm from /components/SearchForm/index.vue export default { components: { SearchForm } }Step 2定义配置项和搜索参数export default { data() { return { // 搜索参数字段名需与 config 中的 prop 对应 queryParams: { username: , status: , dateRange: [] }, // 搜索配置 searchConfig: [ { label: 用户名, prop: username, type: input }, { label: 状态, prop: status, type: select, options: [ { label: 启用, value: 1 }, { label: 禁用, value: 0 } ] }, { label: 创建时间, prop: dateRange, type: date, dateType: daterange, valueFormat: yyyy-MM-dd } ] } } }Step 3在模板中使用template div classpage-container SearchForm :configsearchConfig :model.syncqueryParams searchhandleSearch !-- 通过插槽添加额外按钮 -- el-button typesuccess iconel-icon-download导出/el-button /SearchForm !-- 表格 -- el-table :datatableData !-- ... -- /el-table /div /template script export default { methods: { handleSearch() { console.log(开始搜索参数为, this.queryParams) // 调用 API 获取列表数据 // this.getList() } } } /script四、进阶技巧动态显隐与联动 1. 动态显示/隐藏表单项利用v-if的特性我们可以通过计算属性来控制config。computed: { dynamicConfig() { const config [...this.searchConfig] // 如果不是管理员隐藏“所属部门”搜索项 if (!this.isAdmin) { return config.filter(item item.prop ! deptId) } return config } }2. 表单联动例如选择了AB才可选// 在 config 中添加 disabled 逻辑 { label: 子选项, prop: child, type: select, disabled: () !this.queryParams.parentId // 利用函数返回 }五、总结 通过封装SearchForm组件我们将原本几十行的模板代码缩减到了几行配置。封装的好处显而易见✅开发效率翻倍新页面只需配置config。✅风格高度统一再也不会出现 A 页面搜索框宽 200pxB 页面宽 220px 的情况。✅维护成本低修改搜索逻辑只需改一处。这种配置化的思想是中级向高级前端进阶的必经之路。