# EpCustomColumn 自定义列配置

用于配置表格显示列的组件，支持拖拽排序和持久化。

## 基本用法

```vue
<template>
  <EpCustomColumn
    ref="customColumn"
    module="orderList"
    @confirm="handleConfirm"
  />
</template>

<script setup>
import { useTemplateRef } from 'vue'

const customColumn = useTemplateRef('customColumn')

// 打开配置弹窗
const openCustomColumn = () => {
  customColumn.value?.open()
}

const handleConfirm = (columns) => {
  console.log('选中的列', columns)
}
</script>
```

## Props

| 属性 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| module | 模块标识 | `string \| number` | - |
| api | 获取列配置接口 | `string` \| `Function` | `/api-item/api/customizedColumns/find` |
| saveApi | 保存列配置接口 | `string`\｜ `Function` | `/api-item/api/customizedColumns/save` |
| showHandler | 显示拖拽手柄 | `boolean` | `true` |

## Events

| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| confirm | 确认配置 | `(columns: TransferDataItem[])` |
| loaded | 配置加载完成 | `(columns: TransferDataItem[])` |

## 配合 EpSearchListPage 使用

```vue
<template>
  <EpSearchListPage
    :columns="columns"
    :custom-column-module="11"
    custom-column-api="/api/columns/find"
    custom-column-save-api="/api/columns/save"
  />
</template>
```

## 配合 EpTable 使用

```vue
<template>
  <EpTable
    :columns="columns"
    :custom-column-module="11"
  />
</template>
```