school-developer/src/components/TableColumnControl/README.md

TableColumnControl 表格列显隐控制组件

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

功能特性

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

使用方法

基础用法

<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 持久化

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

固定列（不可隐藏）

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

始终显示的列

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

自定义触发按钮

<!-- 使用图标按钮 -->
<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 接口

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

插槽

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