SearchForm 搜索表单

基于 Element Plus 的搜索表单组件，提供了更便捷的配置方式和更多实用功能。支持输入框、选择器、日期选择器等多种表单项类型，并支持展开/收起功能。

基础用法

<template>
  <g-search-form
    v-model:form="formData"
    :form-items="formItems"
    :initial-values="initialValues"
    :loading="loading"
    @search="handleSearch"
    @reset="handleReset"
  >
    <!-- 可选：在按钮区域前插入自定义内容 -->
    <template #prependActions>
      <el-button>导出</el-button>
    </template>

    <!-- 可选：自定义表单项插槽 -->
    <template #customField="{ formData }">
      <div>自定义内容</div>
    </template>
  </g-search-form>
</template>

<script setup>
import { ref } from 'vue'

const formData = ref({
  keyword: '',
  status: '',
  date: '',
  cardNoStart: '',
  cardNoEnd: '',
})

const formItems = [
  {
    type: 'input',
    label: '关键词',
    prop: 'keyword',
    placeholder: '请输入关键词',
  },
  {
    type: 'select',
    label: '状态',
    prop: 'status',
    options: [
      { label: '全部', value: '' },
      { label: '启用', value: 1 },
      { label: '禁用', value: 0 },
    ],
  },
  {
    type: 'date',
    label: '日期',
    prop: 'date',
    dateType: 'date',
  },
  {
    type: 'inputRange',
    label: '卡面卡编',
    startProp: 'cardNoStart',
    endProp: 'cardNoEnd',
    startPlaceholder: '卡编前缀',
    endPlaceholder: '卡编后缀',
  },
  {
    type: 'slot',
    label: '自定义',
    prop: 'customField',
  },
]

const initialValues = {
  keyword: '',
  status: '',
  date: '',
  cardNoStart: '',
  cardNoEnd: '',
}

const loading = ref(false)

const handleSearch = (values) => {
  console.log('搜索参数：', values)
}

const handleReset = () => {
  console.log('表单已重置')
}
</script>

范围输入（inputRange）

用于需要输入起始值和结束值的场景，如卡编范围、价格区间等。

<template>
  <g-search-form v-model:form="formData" :form-items="formItems" @search="handleSearch" />
</template>

<script setup>
import { ref } from 'vue'

const formData = ref({
  cardNoStart: '',
  cardNoEnd: '',
})

const formItems = [
  {
    type: 'inputRange',
    label: '范围',
    startProp: 'start', // 起始值字段名
    endProp: 'end', // 结束值字段名
    startPlaceholder: '起始值', // 起始输入框占位文本
    endPlaceholder: '结束值', // 结束输入框占位文本
    rangeSeparator: '至', // 分隔符
  },
]

const handleSearch = (values) => {
  console.log('起始值：', values.start)
  console.log('结束值：', values.end)
}
</script>

注意事项：

• inputRange 类型不需要设置 prop 属性，而是使用 startProp 和 endProp
• 两个输入框会自动居中对齐
• 支持回车键触发搜索

Props

参数	说明	类型	默认值
v-model:form	表单数据，支持v-model	object	-
formItems	表单项配置	FormItem[]	[]
initialValues	表单初始值	object	{}
size	表单尺寸	'default' | 'small' | 'large'	'default'
customClass	自定义class	string | array | object	''
customStyle	自定义style	object	{}
customItemStyle	表单项自定义样式	string | array | object	''
loading	是否加载中, 用以控制查询和重置按钮	boolean	false

FormItem 配置项

interface FormItem {
  type: 'input' | 'select' | 'date' | 'inputRange' | 'slot' // 表单项类型
  label: string // 标签文本
  prop?: string // 表单项字段名（inputRange 类型可选）
  placeholder?: string // 占位文本
  disabled?: boolean // 是否禁用
  hidden?: boolean // 是否隐藏

  // select 类型专用
  options?: Array<{
    label: string
    value: any
  }>

  // date 类型专用
  dateType?: string // 日期选择器类型

  // inputRange 类型专用
  startProp?: string // 起始值字段名
  endProp?: string // 结束值字段名
  startPlaceholder?: string // 起始输入框占位文本
  endPlaceholder?: string // 结束输入框占位文本
  rangeSeparator?: string // 分隔符
  onChange?: (value: any) => void // 值变化时的回调函数
  [key: string]: any // 其他 Element Plus 表单项的原生属性
}

Events

事件名	说明	回调参数
search	点击查询时触发	(formData: object) => void
reset	点击重置时触发	-

Slots

插槽名	说明	作用域参数
prependActions	按钮区域前的自定义内容	-
[prop]	自定义表单项内容	{ formData: object }

功能特性

自适应布局

• 默认三列布局，超过三项自动折叠
• 支持展开/收起功能
• 响应式设计，自动调整表单项宽度

表单项类型

• 支持输入框（input）
• 支持下拉选择器（select）
• 支持日期选择器（date）
• 支持范围输入（inputRange）- 两个输入框组成的范围选择器，中间用 - 连接
• 支持自定义插槽（slot）

交互优化

• 表单项 hover 和 focus 状态样式优化
• 自动处理禁用状态样式
• 统一的表单项间距和对齐方式

样式定制

.g__search-form {
  // 输入框和选择器样式
  :deep(.el-input__wrapper),
  :deep(.el-select__wrapper) {
    box-shadow: 0 0 0 1px #f5f7fa;
    background-color: #f5f7fa;
    padding-left: 4px;
  }

  // 表单项样式
  .fill-color-light {
    background: #f5f7fa;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: all 0.1s ease;

    &.focus {
      border: 1px solid #5c2fd2;
      box-shadow: 0px 0px 2px 2px #eee8ff;
    }

    &.hover {
      border: 1px solid #5c2fd2;
    }
  }
}

注意事项

1. 组件基于 Element Plus 的 Form 组件封装，支持透传 Form 组件的原生属性
2. 表单项配置支持透传对应 Element Plus 组件的所有属性
3. 使用 v-model:form 进行双向绑定
4. 自定义表单项需要通过 slot 实现，并指定 type 为 'slot'
5. 表单重置时会恢复到 initialValues 指定的初始值