163 lines
4.0 KiB
Markdown
163 lines
4.0 KiB
Markdown
# 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 | 自定义触发按钮内容 |
|
||
|