a

src/components/TableColumnControl/README.md

@@ -0,0 +1,162 @@
+# 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 | 自定义触发按钮内容 |
+