|
|
@@ -0,0 +1,104 @@
|
|
|
+# 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>
|
|
|
+
|
|
|
+```
|