# 列表页面

列表页面是最常见的业务页面类型，使用 EpSearchListPage 组件实现。

## 页面结构

- **EpSearchListPage**: 列表页容器组件，集成搜索表单和数据表格
- 组件自由组合，参考各组件文档配置

## 完整示例

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

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

defineOptions({
  name: 'DemoList'
})

const { $goto } = useNavigation()

const formData = reactive({
  orderDateStart: '',
  orderDateEnd: '',
})

// 搜索表单配置 - 组件自由组合
const formItemList = ref<SearchListPageProps['formItemList']>([
  // 参考EpForm和各组件文档配置
])

// 表格列配置
const columns:SearchListPageProps['columns'] = [
  // 参考 EpTable 文档
]

// 左侧按钮配置
const leftButtons:SearchListPageProps['leftButtons']=[
  // 按钮配置
]

// 行操作按钮
const actionButtons:SearchListPageProps['actionButtons']=[
  // 操作按钮配置
]

// 新增
const handleAdd = () => {
  $goto({
    name: 'DemoDetail',
    query: { mode: 'add' }
  })
}
</script>
```

## 组件文档

> 查看所有可用组件：[组件文档索引](../overview.md)