# TableColumnControl 使用指南
## 两种使用方式
### 方式一：自动提取（推荐）✨
自动从 `el-table` 中提取列配置，无需手动配置。
```vue
```
**优点：**
- ✅ 无需手动配置列信息
- ✅ 自动同步表格列的变化
- ✅ 代码更简洁
### 方式二：手动配置
手动传入列配置，适合需要自定义列信息的场景。
```vue
```
## 自动提取的配置选项
```typescript
interface AutoExtractOptions {
// 默认隐藏的列（prop 或 label）
defaultHidden?: string[];
// 始终显示的列（prop 或 label）
alwaysShow?: string[];
// 列配置映射（用于自定义列的显示名称等）
columnMap?: Record>;
}
```
### 示例
```vue
```
## 注意事项
1. **自动提取的限制**：
- 需要在表格渲染完成后才能提取列配置
- 如果表格列是动态生成的，可能需要调用 `refreshColumns()` 方法
2. **固定列**：
- 使用 `fixed="left"` 或 `fixed="right"` 的列会自动标记为不可隐藏
- 在 `alwaysShow` 中指定的列也会不可隐藏
3. **存储键（storageKey）**：
- 建议为每个页面使用唯一的 `storageKey`，避免列配置冲突
- 格式建议：`页面名称-table-columns`，如 `user-list-table-columns`
4. **性能考虑**：
- 自动提取会在组件挂载和表格更新时执行
- 对于大型表格，建议使用手动配置以获得更好的性能
## 迁移指南
从手动配置迁移到自动提取：
**之前（手动配置）：**
```vue
```
**之后（自动提取）：**
```vue
```
只需要：
1. 将 `:columns` 改为 `:table-ref="tableRef"`
2. 在 `el-table` 上添加 `ref="tableRef"`
3. 移除 `tableColumnConfig` 和 `isColumnVisible` 函数（如果不再需要）