# EpSearchListPage 搜索列表页

集成搜索表单和数据表格的列表页容器组件。

## 基本用法

```vue
<template>
  <EpSearchListPage
    :form-item-list="formItemList"
    :form-data="formData"
    :columns="columns"
    :left-buttons="leftButtons"
    api="/api/list/page"
    :add="handleAdd"
    show-selection-col
    :action-buttons="actionButtons"
  />
</template>

<script setup lang="tsx">
import { ref, reactive } from 'vue'
import type { SearchListPageProps } from 'el-plus'

const formData = reactive({})

const formItemList = ref<SearchListPageProps['formItemList']>([
  { prop: 'name', label: '名称' },
  { prop: 'status', label: '状态', type: 'EpSelect', props: { options: [] } },
])
// 如果有自定义列，就不需要定义 columns
const columns = [
  { prop: 'name', label: '名称' },
  { prop: 'status', label: '状态' },
]

const leftButtons = ref<SearchListPageProps['leftButtons']>([
  { name: '删除', prop: 'delete', type: 'danger' },
])

const actionButtons = ref<SearchListPageProps['actionButtons']>([
  { name: '编辑', prop: 'edit', onClick: (row) => {} },
  { name: '删除', prop: 'delete', onClick: (row) => {} },
])

const handleAdd = () => {}
</script>
```

## Props

| 属性 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| api | 列表接口地址 | `string \| (reqData) => Promise` | - |
| method | 请求方法 | `string` | `'post'` |
| reqData | 请求体数据 | `object` | `{}` |
| reqParams | URL 参数 | `object` | `{}` |
| reqBefore | 请求前处理 | `(reqData) => reqData` | - |
| reqAfter | 响应后处理 | `(res) => data` | - |
| formData | 表单数据，参考 [EpForm 表单数据说明](./form.md#表单数据) | `object` | `{}` |
| formItemList | 搜索表单配置 | [`FormItemProps[]`](./form.md#formitemprops-配置) | `[]` |
| columns | 表格列配置（有customColumnModule就不需要定义列） | [`TableColumn[]`](./table.md#tablecolumn-配置) | `[]` |
| leftButtons | 左侧按钮 | [`ButtonProps[]`](./buttons.md#buttonprops-配置) | `[]` |
| actionButtons | 操作列按钮 | [`ButtonProps[]`](./buttons.md#buttonprops-配置) | `[]` |
| add | 新增按钮回调 | `Function` | - |
| showSelectionCol | 显示多选列 | `boolean` | `false` |
| showSingleSelectionCol | 显示单选列 | `boolean` | `false` |
| showIndexCol | 显示序号列 | `boolean` | `true` |
| showOperationColumn | 显示操作列 | `boolean` | - |
| minWidth | 列最小宽度 | `number \| string` | - |
| actionColWidth | 操作列宽度 | `number \| string` | `200` |
| formatColumns | 格式化列配置 | [`TableColumn[]`](./table.md#tablecolumn-配置) | `[]` |
| offsetTop | 表格额外距离 | `number` | `0` |
| isInitSearch | 是否初始化加载 | `boolean` | `true` |
| tableProps | 表格额外属性 | `object` | - |
| formProps | 表单额外属性 | `object` | - |
| buttonsProps | 按钮组额外属性 | `object` | - |
| name | 权限前缀 | `string` | - |
| customColumnModule | 自定义列模块 | `string \| number` | - |

::: warning 互斥关系
`customColumnModule` 和以下配置是**互斥**的：
- `columns`：设置了 `customColumnModule` 后会忽略 `columns`
- `leftButtons` 中的"自定义列设置"按钮：组件会自动内置该按钮

**正确用法**：
- 启用自定义列：`customColumnModule: "moduleName"`（无需配 columns 和自定义列按钮）
- 固定列模式：不设置 `customColumnModule`，使用 `columns` 配置
:::
| customColumnApi | 自定义列接口 | `string` | - |
| customColumnSaveApi | 自定义列保存接口 | `string` | - |