# TableColumnControl 表格列显隐控制组件

一个通用的表格列显示/隐藏控制组件，支持动态控制表格列的显示状态。

## 功能特性

- ✅ 动态控制表格列的显示/隐藏
- ✅ 支持全选/全不选
- ✅ 支持重置为默认值
- ✅ 支持 localStorage 持久化
- ✅ 支持固定列（不可隐藏）
- ✅ 支持始终显示的列
- ✅ 可自定义触发按钮样式

## 使用方法

### 基础用法

```vue
<template>
  <div>
    <!-- 表格列控制按钮 -->
    <TableColumnControl
      :columns="tableColumns"
      v-model="visibleColumns"
      @change="handleColumnChange"
    />
    
    <!-- 表格 -->
    <el-table :data="tableData">
      <el-table-column
        v-for="col in visibleTableColumns"
        :key="col.prop"
        :prop="col.prop"
        :label="col.label"
        :width="col.width"
      />
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import TableColumnControl from '/@/components/TableColumnControl/index.vue'

const tableColumns = [
  { prop: 'name', label: '姓名', width: 120 },
  { prop: 'age', label: '年龄', width: 80 },
  { prop: 'email', label: '邮箱', width: 200 },
  { prop: 'address', label: '地址', width: 300 }
]

const visibleColumns = ref<string[]>(['name', 'age', 'email', 'address'])

// 根据 visibleColumns 过滤出需要显示的列
const visibleTableColumns = computed(() => {
  return tableColumns.filter(col => 
    visibleColumns.value.includes(col.prop || col.label)
  )
})

const handleColumnChange = (columns: string[]) => {
  console.log('显示的列:', columns)
}
</script>
```

### 使用 localStorage 持久化

```vue
<TableColumnControl
  :columns="tableColumns"
  v-model="visibleColumns"
  storage-key="my-table-columns"
/>
```

### 固定列（不可隐藏）

```vue
const tableColumns = [
  { prop: 'name', label: '姓名', fixed: 'left' }, // 固定左侧，不可隐藏
  { prop: 'age', label: '年龄' },
  { prop: 'action', label: '操作', fixed: 'right' } // 固定右侧，不可隐藏
]
```

### 始终显示的列

```vue
const tableColumns = [
  { prop: 'name', label: '姓名', alwaysShow: true }, // 始终显示，不可隐藏
  { prop: 'age', label: '年龄' }
]
```

### 自定义触发按钮

```vue
<!-- 使用图标按钮 -->
<TableColumnControl
  :columns="tableColumns"
  v-model="visibleColumns"
  trigger-type="default"
  trigger-circle
/>

<!-- 使用文字按钮 -->
<TableColumnControl
  :columns="tableColumns"
  v-model="visibleColumns"
  trigger-text="列设置"
  trigger-type="primary"
/>

<!-- 使用链接按钮 -->
<TableColumnControl
  :columns="tableColumns"
  v-model="visibleColumns"
  trigger-link
  trigger-text="自定义列"
/>
```

## Props

| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| columns | 表格列配置数组 | Column[] | 必填 |
| modelValue | 当前显示的列的 prop 或 label 数组 | string[] | - |
| storageKey | localStorage 存储的 key，用于持久化 | string | - |
| triggerType | 触发按钮的类型 | 'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'text' | 'default' |
| triggerSize | 触发按钮的大小 | 'large' \| 'default' \| 'small' | 'default' |
| triggerCircle | 触发按钮是否为圆形 | boolean | false |
| triggerText | 触发按钮的文字 | string | '' |
| triggerLink | 触发按钮是否为链接样式 | boolean | false |

## Events

| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| update:modelValue | 显示的列变化时触发 | (columns: string[]) |
| change | 显示的列变化时触发 | (columns: string[]) |

## Column 接口

```typescript
interface Column {
  prop?: string        // 列的 prop，用于标识列
  label: string        // 列的标签
  fixed?: boolean | 'left' | 'right'  // 固定列，不可隐藏
  alwaysShow?: boolean // 始终显示的列，不可隐藏
  [key: string]: any   // 其他属性
}
```

## 插槽

| 插槽名 | 说明 |
|--------|------|
| trigger | 自定义触发按钮内容 |