# EpTable 数据表格

基于 el-table 封装，支持配置化列、分页、操作列等功能。

## 基本用法

```vue
<template>
  <EpTable
    :data="tableData"
    :columns="columns"
    :action-buttons="actionButtons"
  />
</template>

<script setup lang="tsx">
import { ref } from 'vue'

const tableData = ref([])

const columns = [
  { prop: 'name', label: '名称' },
  { prop: 'status', label: '状态' },
]

const actionButtons = [
  { name: '编辑', onClick: (row) => {} },
  { name: '删除', onClick: (row) => {} },
]
</script>
```

## Props

| 属性 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| data | 表格数据 ^el^ | `array` | `[]` |
| columns | 列配置 | [`TableColumn[]`](#tablecolumn-配置) | `[]` |
| api | 数据接口 | `string \| (reqData) => Promise` | - |
| method | 请求方法 | `string` | `'post'` |
| reqData | 请求体数据 | `object` | `{}` |
| reqParams | URL 参数 | `object` | `{}` |
| reqBefore | 请求前处理 | `(reqData) => reqData` | - |
| reqAfter | 响应后处理 | `(res) => data` | - |
| size | 表格尺寸 ^el^ | `'large' \| 'default' \| 'small'` | `'default'` |
| border | 是否带边框 ^el^ | `boolean` | `true` |
| headerCellStyle | 表头样式 ^el^ | `object` | `{ background: '#EEEFF3', fontSize: '14px', color: '#505050' }` |
| showSelectionCol | 显示多选列 | `boolean` | `false` |
| showSingleSelectionCol | 显示单选列 | `boolean` | `false` |
| showIndexCol | 显示序号列 | `boolean` | `true` |
| align | 对齐方式 | `'left' \| 'center' \| 'right'` | `'center'` |
| minWidth | 列最小宽度 | `number \| string` | - |
| actionColWidth | 操作列宽度 | `number \| string` | `200` |
| actionButtons | 操作列按钮 | [`ButtonProps[]`](./buttons.md#buttonprops-配置) | `[]` |
| formatColumns | 格式化列配置 | [`TableColumn[]`](#tablecolumn-配置) | `[]` |
| showPagination | 显示分页 | `boolean` | `false` |
| paginationProps | 分页属性 | `object` | `{}` |
| isFrontPage | 前端分页 | `boolean` | `false` |
| isInitSearch | 初始化加载 | `boolean` | `true` |
| disabled | 是否禁用 | `boolean` | `false` |
| reserveSelection | 保留选择 | `boolean` | `false` |
| selectable | 可选择函数 | `(row, index) => boolean` | - |
| indexFormatter | 序号列格式化 | `number \| Function` | - |

> ^el^ 表示继承自 [el-table](https://element-plus.org/zh-CN/component/table.html) 的属性

## TableColumn 配置

| 属性 | 说明 | 类型 |
|------|------|------|
| prop | 字段名 | `string` |
| label | 列标题 | `string` |
| width | 列宽度 | `number \| string` |
| minWidth | 最小宽度 | `number \| string` |
| type | 组件类型 | `string` |
| props | 组件属性 | `object` |
| render | 自定义渲染 | `({ row, $index }) => VNode` |
| headerRender | 自定义表头渲染 | `() => VNode` |
| required | 是否必填 | `boolean \| () => boolean` |
| disabled | 是否禁用 | `boolean \| (scope) => boolean` |
| show | 是否显示（支持函数） | `boolean \| () => boolean` |
| hide | 是否隐藏（支持函数） | `boolean \| () => boolean` |
| filter | 显示筛选 | `boolean` |
| editable | 可批量编辑 | `boolean` |

## 在 Form 中使用

```tsx
const formItemList = [
  {
    col: 24,
    type: 'EpTable',
    props: {
      data: formData.detailList,
      showSelectionCol: true,
      columns: [
        { prop: 'itemCode', label: '编号' },
        { prop: 'itemName', label: '名称' },
        {
          prop: 'quantity',
          label: '数量',
          type: 'EpInput',
        },
      ],
    },
  },
]
```

## 注意事项

### 在 columns 中使用表单项

在 EpTable 的 columns 中使用表单项时，`type` 不能省略，否则会显示为普通文本。

```json
// ❌ 错误：表格列中省略 type，会显示为文本
{ "prop": "quantity", "label": "数量" }
// ✅ 正确：表格列中必须指定 type
{ "prop": "quantity", "label": "数量", "type": "EpInput" }
```

## 自定义渲染

```tsx
const columns = [
  {
    prop: 'status',
    label: '状态',
    render: ({ row }) => (
      <el-tag type={row.status === 1 ? 'success' : 'danger'}>
        {row.status === 1 ? '启用' : '禁用'}
      </el-tag>
    ),
  },
]
```

## Expose 方法

| 方法 | 说明 |
|------|------|
| getSelectionRows | 获取选中行 |
| clearSelection | 清空选择 |
| search | 重新加载数据 |