# SearchTable 组件 API 文档

## 组件简介 | Component Introduction
`SearchTable` 是集成了搜索表单与数据表格的复合型组件，支持搜索、分页、表格展示、插槽扩展等功能。

`SearchTable` is a composite component integrating a search form and data table, supporting search, pagination, table display, and slot extension.

---

## Props/属性
| 属性名 | 说明 | 类型 | 是否必填 | 默认值 |
|--------|------|------|----------|--------|
| searchConfig | 搜索区配置对象 | Object/Boolean | 否 | true |
| tableConfig | 表格配置对象 | Object/Boolean | 是 | - |
| tableData | 表格数据 | Array | 否 | [] |
| pageConfig | 分页配置对象 | Object | 否 | - |
| total | 总条数 | Number | 否 | 0 |
| loading | 加载状态 | Boolean/Object | 否 | false |
| foldable | 搜索区是否可折叠 | Boolean | 否 | false |

---

## searchConfig 配置项 | SearchConfig Options
searchConfig 结构与 VForm 的 config/fields 一致，详见 VForm 文档。常用字段如下：

| 字段名 | 说明 | 类型 | 备注 |
|--------|------|------|------|
| fields | 搜索表单项配置 | Array | 详见 VForm fields |
| columns | 搜索表单列数 | Number |  |
| labelWidth | 标签宽度 | Number/String |  |
| labelSuffix | 标签后缀 | String | 默认为 ':' |
| actionAlign | 操作区对齐 | String | 'left'/'center'/'right' |
| actionNewLine | 操作区换行 | Boolean |  |
| searchBtn | 搜索按钮配置 | Object/Boolean | 参考 VForm submitBtn |
| resetBtn | 重置按钮配置 | Object/Boolean | 参考 VForm resetBtn |
| ... | 其余 VForm config 支持的属性 |  |  |

fields 每项支持的字段详见 VForm 文档，如 name、component、label、placeholder、options、rules、slot、render、class、style、group、colSpan、labelWidth、required、clearable、onChange 等。

---

## tableConfig 配置项 | TableConfig Options
tableConfig 结构与 VTable 的 config/columns 一致，详见 VTable 文档。常用字段如下：

| 字段名 | 说明 | 类型 | 备注 |
|--------|------|------|------|
| columns | 表格列配置 | Array | 详见 VTable columns |
| border | 是否显示边框 | Boolean |  |
| stripe | 斑马纹 | Boolean |  |
| rowKey | 行数据唯一标识 | String |  |
| highlightCurrentRow | 高亮当前行 | Boolean |  |
| maxHeight | 最大高度 | Number/String |  |
| tableLayout | 表格布局 | String | 'auto'/'fixed' |
| rowClassName | 行 class 名 | String/Function | (row, rowIndex) => string |
| class | 表格 class | String |  |
| style | 表格 style | Object |  |
| lazy | 懒加载 | Boolean |  |
| load | 懒加载方法 | Function | (row, treeNode, resolve) => void |
| defaultSort | 默认排序 | Object | { prop, order } |
| slot | 插槽名映射 | Object | { empty, append } |
| ... | 其余 VTable config 支持的属性 |  |  |

columns 每项支持的字段详见 VTable 文档，如 type、key、title、slot、render、children、width、minWidth、index、formatter、showOverflowTooltip、fixed、align 等。

---

## pageConfig 配置项 | PageConfig Options
分页配置，结构与 VTable pageConfig 一致，详见 VTable 文档。常用字段如下：

| 字段名 | 说明 | 类型 | 备注 |
|--------|------|------|------|
| layout | 分页布局 | String | 参考 el-pagination，默认 'slot,total,prev,pager,next,sizes' |
| align | 分页对齐 | String | 'left'/'center'/'right' |
| defaultPageSize | 默认每页条数 | Number |  |
| background | 背景 | Boolean |  |
| small | 小型分页 | Boolean |  |
| disabled | 禁用 | Boolean |  |
| onSizeChange | pageSize 改变回调 | Function | (size) => void |
| onCurrentChange | 当前页改变回调 | Function | (page) => void |
| slot | 分页插槽名 | String |  |
| class | 分页 class | String |  |
| ... | 其余 el-pagination 支持的属性 |  |  |

---

## v-model
- search: 搜索表单绑定对象，类型：`Object`
- currentPage: 当前页码，类型：`Number`
- pageSize: 每页条数，类型：`Number`

---

## 事件 | Events
| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| search | 点击搜索时触发 | (done, eventType) |
| toggle-fold | 折叠/展开搜索区时触发 | (isCollapsed) |

---

## 插槽 | Slots
- 支持通过 slot 名自定义搜索区、表格区、分页区、操作区等内容。
- 常用插槽：search-prepend、search-append、action-prepend、action-append、table-prepend、table-append、expandSlot、addressSlot、startDateHeader、startDate、endDate、action、status、gender、emptySlot、pageSlot、page-prepend 等。
- 搜索区、表格区、分页区的 slot 名可通过配置项 slot 字段指定。
- fields/columns/slot 字段可实现自定义内容和插槽扩展。

---

## 方法 | Methods (通过 ref 调用)
| 方法名 | 说明 |
|--------|------|
| search() | 触发搜索 |
| reset() | 重置搜索表单 |
| toggleFold() | 折叠/展开搜索区 |
| refs.VFormRef | 获取内部 VForm 实例 |
| refs.VTableRef | 获取内部 VTable 实例 |

---

## 示例 | Example
```vue
<template>
  <SearchTable
    class="search-table-test"
    ref="searchTableRef"
    v-model:search="search"
    v-model:page-size="pageSize"
    v-model:current-page="currentPage"
    :search-config="searchConfig"
    :table-config="tableConfig"
    :table-data="tableData"
    :total="1000"
    :foldable="true"
    @search="searchHandle"
    @toggle-fold="foldChange"
  >
    <template #namePrefix>https:</template>
    <template #search-prepend> 示例 </template>
    <template #search-append>
      <div class="download-tip">
        您可以在这里下载查询明细结果（下载结果为excel文档.xls）<el-button type="primary">下载</el-button>
      </div>
    </template>
    <template v-slot:action-prepend>
      <el-button type="warning">前置按钮</el-button>
    </template>
    <template v-slot:action-append>
      <el-button type="danger">后置按钮</el-button>
    </template>
    <template #expandSlot="scope">
      <div>
        <p>Address: {{ scope.row.address }}</p>
        <p>Name: {{ scope.row.name }}</p>
      </div>
    </template>
    <template #addressSlot="scope">
      <el-input v-model="scope.row.address"></el-input>
    </template>
    <template #startDateHeader>
      <el-input v-model="name" size="small" placeholder="Type to search" />
    </template>
    <template #startDate="{ row, column, $index }">{{ row.startDate }}--{{ $index }}</template>
    <template #endDate>结束时间</template>
    <template #action>
      <el-button>编辑</el-button>
      <el-button>删除</el-button>
    </template>
    <template #status="{ row }">
      <el-tag v-if="row.status === 0" type="primary">Tag 0</el-tag>
      <el-tag v-if="row.status === 1" type="success">Tag 1</el-tag>
      <el-tag v-if="row.status === 2" type="info">Tag 2</el-tag>
    </template>
    <template #gender="{ row }">{{ row.gender === '0' ? '女' : '男' }}</template>
    <template #emptySlot>自定义的数据为空</template>
    <template #pageSlot>这是page的是slot</template>
    <template #page-prepend><span>总共333页</span></template>
  </SearchTable>
</template>

<script setup>
import { ref, h, onMounted } from 'vue'
import { SearchTable } from 'your-lib-path'
import { ElInput, ElInputNumber } from 'element-plus'

const searchTableRef = ref()
const search = ref({})
const pageSize = ref(10)
const currentPage = ref(1)
const name = ref('111')
const searchConfig = {
  columns: 3,
  labelWidth: 100,
  labelSuffix: ':',
  fields: [
    { name: 'A', component: 'Input', label: '姓名', placeholder: '请输入', clearable: true },
    { name: 'B', component: 'Select', label: '地区', placeholder: '请选择', clearable: true, options: [ { label: '上海', value: 0 }, { label: '北京', value: 1 } ] },
    { name: 'C', component: 'DatePicker', label: '日期', placeholder: '请选择开始日期', valueFormat: 'x' }
  ]
}
const tableConfig = {
  columns: [
    { type: 'expand', slot: 'expandSlot' },
    { title: '基本信息', children: [ { type: 'selection', width: 50 }, { title: '序号', type: 'index', width: 40 }, { title: (attrs) => h('span', {}, '这是自定义标题'), children: [ { slot: { default: 'startDate', header: 'startDateHeader' }, minWidth: 200, title: '开始时间' }, { slot: 'endDate', title: '结束时间', minWidth: 200 } ] }, { key: 'name', title: '姓名', minWidth: 150, render({ row }) { return h(ElInput, { type: 'text', modelValue: row.name }) } }, { title: '年龄', key: 'age', minWidth: 130, render({ row }) { return h(ElInputNumber, { modelValue: row.age }) } }, { title: '性别', minWidth: 100, slot: 'gender' }, { key: 'address', title: '地址', slot: 'addressSlot', minWidth: 200 } ] } ]
}
const tableData = ref([])
function searchHandle(done, eventType) { /* ... */ done() }
function foldChange(value) { /* ... */ }
</script>
```