# SearchForm 组件使用说明文档（Vue 3 + Element Plus）
这是一个基于 Element Plus 的可配置化搜索表单组件，支持常见的表单输入类型，便于快速构建后台筛选表单。

## 组件功能
支持多种表单项类型：input, append, select, selectGroup, date, daterange, text, table

响应式布局（支持响应式栅格）

搜索按钮（submitForm）

可选的重置按钮、新增按钮

支持表单项默认值、动态表单项宽度控制

## Props 参数说明
| Prop 名称         | 类型      | 说明              | 默认值    |
| --------------- | ------- | --------------- | ------ |
| `formItems`     | Array   | 表单项配置数组         | -      |
| `is_button`     | Boolean | 是否显示操作按钮        | `true` |
| `is_reset`      | Boolean | 是否显示重置按钮        | `true` |
| `is_add_button` | String  | 新增按钮文案，传空字符串不显示 | `''`   |


## formItems 配置项说明
| 字段名              | 说明                           | 类型      | 是否必传 | 示例值                                      |
| ---------------- | ---------------------------- | ------- | ---- | ---------------------------------------- |
| `type`           | 表单项类型                        | string  | 是    | `input`, `append`, `select`, `selectGroup`, `date`, `daterange`, `text`, `table`, `daterange`  |
| `label`          | 表单项的标题                       | string  | 是    | `"姓名"`                                   |
| `prop`           | 表单数据字段名（key）                 | string  | 是    | `"name"`                                 |
| `placeholder`    | 占位符文本                        | string  | 否    | `"请输入姓名"`                                |
| `defaultVal`     | 表单项初始值                       | any     | 否    | `"张三"` 或 `''`                            |
| `options`        | 下拉/分组选择项配置（select类）          | array   | 否    | `[ { label, value } ]`                   |
| `colSpan`        | 表单项所占列数（响应式支持）               | number  | 否    | `6`, `8`, `12`（默认8）                      |
| `dateType`       | 日期选择器类型（如`date`, `datetime`） | string  | 否    | `date`, `datetime`                       |
| `needEnterEvent` | 是否支持 `Enter` 触发搜索            | boolean | 否    | `true`                                   |
| `clearable`      | 是否支持清空                       | boolean | 否    | `true`, `false`                          |


## Emits 事件
| 事件名             | 参数       | 说明         |
| --------------- | -------- | ---------- |
| `formSubmitted` | `form`对象 | 表单点击“搜索”提交 |
| `formReset`     | 无        | 表单点击“重置”   |
| `addForm`       | 无        | 表单点击“新增”   |


## 使用示例
```vue
<template>
  <SearchForm
    :formItems="formItems"
    :is_button="true"
    :is_reset="true"
    is_add_button="新增"
    @formSubmitted="onSearch"
    @formReset="onReset"
    @addForm="onAdd"
  />
</template>

<script setup>
import SearchForm from '@/components/SearchForm.vue'

const formItems = [
  {
    type: 'input',
    label: '姓名',
    prop: 'name',
    placeholder: '请输入姓名',
    defaultVal: '',
    colSpan: 8,
    needEnterEvent: true,
  },
  {
    type: 'select',
    label: '性别',
    prop: 'gender',
    placeholder: '请选择性别',
    options: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' },
    ],
  },
  {
    type: 'daterange',
    label: '时间范围',
    prop: 'timeRange',
  },
]

const onSearch = (formData) => {
  console.log('搜索数据:', formData)
}

const onReset = () => {
  console.log('表单重置')
}

const onAdd = () => {
  console.log('点击新增')
}
</script>

```