a
This commit is contained in:
guochunsi
461
src/components/TableColumnControl/index.vue
Normal file
461
src/components/TableColumnControl/index.vue
Normal file
@@ -0,0 +1,461 @@
|
||||
<template>
|
||||
<div class="table-column-control">
|
||||
<el-button
|
||||
:type="triggerType"
|
||||
:icon="Setting"
|
||||
:size="triggerSize"
|
||||
:circle="triggerCircle"
|
||||
:link="triggerLink"
|
||||
@click="visible = true"
|
||||
>
|
||||
<slot name="trigger">
|
||||
{{ triggerText || '列设置' }}
|
||||
</slot>
|
||||
</el-button>
|
||||
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
title="列显示设置"
|
||||
:width="dialogWidth"
|
||||
append-to-body
|
||||
>
|
||||
<div class="column-control-content">
|
||||
<div class="column-control-header">
|
||||
<div class="header-actions">
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
@click="handleToggleSelectAll"
|
||||
>
|
||||
{{ isAllSelected ? '取消全选' : '全选' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column-control-body">
|
||||
<el-checkbox-group v-model="checkedColumns" @change="handleColumnChange" class="column-checkbox-group">
|
||||
<div
|
||||
v-for="column in actualColumns"
|
||||
:key="column.prop || column.label"
|
||||
class="column-item"
|
||||
>
|
||||
<el-checkbox
|
||||
:label="column.prop || column.label"
|
||||
:disabled="column.fixed !== undefined || column.alwaysShow"
|
||||
>
|
||||
{{ column.label }}
|
||||
</el-checkbox>
|
||||
<el-tag v-if="column.fixed !== undefined" size="small" type="info">
|
||||
{{ column.fixed === 'left' ? '固定左侧' : column.fixed === 'right' ? '固定右侧' : '固定' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="column-control-footer">
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
<el-button type="primary" @click="handleConfirm">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted, nextTick, type Ref } from 'vue'
|
||||
import { Setting } from '@element-plus/icons-vue'
|
||||
import type { TableInstance } from 'element-plus'
|
||||
import { useTableColumns, type ColumnConfig } from '/@/composables/useTableColumns'
|
||||
|
||||
interface Column {
|
||||
prop?: string
|
||||
label: string
|
||||
fixed?: boolean | 'left' | 'right'
|
||||
alwaysShow?: boolean // 始终显示的列，不可隐藏
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
interface Props {
|
||||
columns?: Column[] // 手动配置的列（可选，如果提供了 tableRef 则自动提取）
|
||||
tableRef?: Ref<TableInstance | undefined> // el-table 的 ref，用于自动提取列配置
|
||||
modelValue?: string[] // 当前显示的列
|
||||
storageKey?: string // localStorage 存储的 key，用于持久化
|
||||
triggerType?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
|
||||
triggerSize?: 'large' | 'default' | 'small'
|
||||
triggerCircle?: boolean
|
||||
triggerText?: string
|
||||
triggerLink?: boolean
|
||||
dialogWidth?: string // 对话框宽度
|
||||
// 自动提取时的配置选项
|
||||
autoExtractOptions?: {
|
||||
defaultHidden?: string[]
|
||||
alwaysShow?: string[]
|
||||
columnMap?: Record<string, Partial<ColumnConfig>>
|
||||
}
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
triggerType: 'default',
|
||||
triggerSize: 'default',
|
||||
triggerCircle: false,
|
||||
triggerText: '',
|
||||
triggerLink: false,
|
||||
dialogWidth: '600px'
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string[]]
|
||||
'change': [value: string[]]
|
||||
}>()
|
||||
|
||||
const visible = ref(false)
|
||||
const checkedColumns = ref<string[]>([])
|
||||
|
||||
// 监听弹窗打开，触发列配置重新提取
|
||||
watch(visible, (newVal) => {
|
||||
console.log('[TableColumnControl] 弹窗状态变化:', newVal)
|
||||
if (newVal && props.tableRef) {
|
||||
console.log('[TableColumnControl] 弹窗打开，tableRef 存在:', props.tableRef)
|
||||
console.log('[TableColumnControl] tableRef.value:', props.tableRef.value)
|
||||
console.log('[TableColumnControl] tableRef.value 类型:', typeof props.tableRef.value)
|
||||
|
||||
// 尝试多种方式获取表格实例
|
||||
const getTableInstance = (): TableInstance | null => {
|
||||
// 方法1: 直接从 props.tableRef.value 获取
|
||||
if (props.tableRef?.value) {
|
||||
console.log('[TableColumnControl] 从 props.tableRef.value 获取表格实例')
|
||||
return props.tableRef.value
|
||||
}
|
||||
|
||||
// 方法2: 尝试从 props.tableRef 本身获取（可能是直接的 ref 对象）
|
||||
if ((props.tableRef as any).value) {
|
||||
console.log('[TableColumnControl] 从 props.tableRef 的 value 属性获取表格实例')
|
||||
return (props.tableRef as any).value
|
||||
}
|
||||
|
||||
// 方法3: 如果 props.tableRef 本身就是表格实例（不应该发生，但作为备用）
|
||||
if ((props.tableRef as any).$el) {
|
||||
console.log('[TableColumnControl] props.tableRef 本身就是表格实例')
|
||||
return props.tableRef as any
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
// 如果 tableRef.value 已经有值，直接提取
|
||||
const tableInstance = getTableInstance()
|
||||
if (tableInstance) {
|
||||
const tableEl = (tableInstance as any).$el
|
||||
if (tableEl) {
|
||||
console.log('[TableColumnControl] 表格实例已就绪，立即提取列配置')
|
||||
nextTick(() => {
|
||||
refreshAutoColumns()
|
||||
console.log('[TableColumnControl] 刷新后列数:', actualColumns.value.length)
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// 等待 tableRef.value 有值后再提取
|
||||
let waitCount = 0
|
||||
const maxWaitCount = 50 // 最多等待 5 秒（50 * 100ms）
|
||||
let waitTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
const waitForTableRef = () => {
|
||||
// 尝试获取表格实例
|
||||
const tableInstance = getTableInstance()
|
||||
if (tableInstance) {
|
||||
const tableEl = (tableInstance as any).$el
|
||||
if (tableEl) {
|
||||
console.log('[TableColumnControl] 表格实例已就绪，开始提取列配置')
|
||||
nextTick(() => {
|
||||
refreshAutoColumns()
|
||||
console.log('[TableColumnControl] 刷新后列数:', actualColumns.value.length)
|
||||
|
||||
// 如果还是没有数据，多次重试
|
||||
let retryCount = 0
|
||||
const maxRetries = 10
|
||||
const retryInterval = setInterval(() => {
|
||||
retryCount++
|
||||
console.log(`[TableColumnControl] 第 ${retryCount} 次重试刷新列配置`)
|
||||
refreshAutoColumns()
|
||||
console.log(`[TableColumnControl] 重试后列数:`, actualColumns.value.length)
|
||||
if (actualColumns.value.length > 0 || retryCount >= maxRetries) {
|
||||
console.log('[TableColumnControl] 停止重试，最终列数:', actualColumns.value.length)
|
||||
clearInterval(retryInterval)
|
||||
}
|
||||
}, 200)
|
||||
})
|
||||
return // 成功获取，退出
|
||||
}
|
||||
}
|
||||
|
||||
// 继续等待
|
||||
waitCount++
|
||||
if (waitCount < maxWaitCount) {
|
||||
console.log(`[TableColumnControl] tableRef.value 还未就绪，等待中... (${waitCount}/${maxWaitCount})`)
|
||||
waitTimer = setTimeout(waitForTableRef, 100)
|
||||
} else {
|
||||
console.warn('[TableColumnControl] 等待超时，tableRef.value 仍未就绪')
|
||||
console.warn('[TableColumnControl] props.tableRef:', props.tableRef)
|
||||
console.warn('[TableColumnControl] props.tableRef?.value:', props.tableRef?.value)
|
||||
// 即使超时，也尝试提取一次（可能表格已经渲染了，只是 ref 没有正确绑定）
|
||||
console.log('[TableColumnControl] 尝试强制提取列配置')
|
||||
refreshAutoColumns()
|
||||
console.log('[TableColumnControl] 强制提取后列数:', actualColumns.value.length)
|
||||
}
|
||||
}
|
||||
|
||||
// 延迟一下，确保表格已渲染
|
||||
setTimeout(() => {
|
||||
waitForTableRef()
|
||||
}, 300)
|
||||
|
||||
// 清理函数：弹窗关闭时清除等待定时器
|
||||
return () => {
|
||||
if (waitTimer) {
|
||||
clearTimeout(waitTimer)
|
||||
waitTimer = null
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.warn('[TableColumnControl] 弹窗打开但 tableRef 不存在或为空')
|
||||
}
|
||||
})
|
||||
|
||||
// 如果提供了 tableRef，使用自动提取；否则使用手动配置的 columns
|
||||
const tableColumnsResult = props.tableRef
|
||||
? useTableColumns(props.tableRef, props.storageKey, props.autoExtractOptions)
|
||||
: {
|
||||
columns: computed(() => []),
|
||||
visibleColumns: computed(() => []),
|
||||
updateVisibleColumns: () => {},
|
||||
refreshColumns: () => {},
|
||||
isColumnVisible: () => true
|
||||
}
|
||||
|
||||
const {
|
||||
columns: autoColumns,
|
||||
visibleColumns: autoVisibleColumns,
|
||||
updateVisibleColumns: updateAutoVisibleColumns,
|
||||
refreshColumns: refreshAutoColumns,
|
||||
isColumnVisible: autoIsColumnVisible
|
||||
} = tableColumnsResult
|
||||
|
||||
// 监听 tableRef.value 的变化，当它被赋值时触发列配置提取
|
||||
if (props.tableRef) {
|
||||
// 尝试多种方式监听 tableRef.value 的变化
|
||||
watch(() => {
|
||||
// 尝试多种方式获取 tableRef.value
|
||||
if (props.tableRef?.value) {
|
||||
return props.tableRef.value
|
||||
}
|
||||
if ((props.tableRef as any).value) {
|
||||
return (props.tableRef as any).value
|
||||
}
|
||||
return null
|
||||
}, (newVal, oldVal) => {
|
||||
if (newVal && newVal !== oldVal) {
|
||||
console.log('[TableColumnControl] tableRef.value 已赋值，触发列配置提取')
|
||||
// 延迟一下，确保表格完全渲染
|
||||
setTimeout(() => {
|
||||
nextTick(() => {
|
||||
refreshAutoColumns()
|
||||
console.log('[TableColumnControl] 列配置提取完成，列数:', actualColumns.value.length)
|
||||
})
|
||||
}, 200)
|
||||
}
|
||||
}, { immediate: true }) // 立即检查一次，如果 tableRef.value 已经有值，立即触发
|
||||
}
|
||||
|
||||
// 调试：检查 tableRef 传递
|
||||
console.log('[TableColumnControl] props.tableRef:', props.tableRef)
|
||||
console.log('[TableColumnControl] props.tableRef?.value:', props.tableRef?.value)
|
||||
|
||||
// 暴露给父组件使用
|
||||
defineExpose({
|
||||
isColumnVisible: autoIsColumnVisible,
|
||||
visibleColumns: autoVisibleColumns,
|
||||
refreshColumns: refreshAutoColumns
|
||||
})
|
||||
|
||||
// 实际使用的列配置
|
||||
const actualColumns = computed(() => {
|
||||
const result = props.tableRef && autoColumns.value.length > 0
|
||||
? autoColumns.value
|
||||
: props.columns || []
|
||||
console.log('[TableColumnControl] actualColumns 计算:', {
|
||||
hasTableRef: !!props.tableRef,
|
||||
autoColumnsLength: autoColumns.value.length,
|
||||
propsColumnsLength: props.columns?.length || 0,
|
||||
resultLength: result.length
|
||||
})
|
||||
return result
|
||||
})
|
||||
|
||||
// 初始化选中的列
|
||||
const initCheckedColumns = () => {
|
||||
if (props.modelValue && props.modelValue.length > 0) {
|
||||
checkedColumns.value = [...props.modelValue]
|
||||
} else if (props.tableRef && autoVisibleColumns.value.length > 0) {
|
||||
// 使用自动提取的可见列
|
||||
checkedColumns.value = [...autoVisibleColumns.value]
|
||||
} else if (props.storageKey) {
|
||||
// 从 localStorage 读取
|
||||
const saved = localStorage.getItem(props.storageKey)
|
||||
if (saved) {
|
||||
try {
|
||||
checkedColumns.value = JSON.parse(saved)
|
||||
} catch (e) {
|
||||
// 如果解析失败，使用默认值（所有列）
|
||||
checkedColumns.value = getDefaultColumns()
|
||||
}
|
||||
} else {
|
||||
checkedColumns.value = getDefaultColumns()
|
||||
}
|
||||
} else {
|
||||
checkedColumns.value = getDefaultColumns()
|
||||
}
|
||||
}
|
||||
|
||||
// 获取默认显示的列（所有可隐藏的列）
|
||||
const getDefaultColumns = (): string[] => {
|
||||
return actualColumns.value
|
||||
.filter(col => !col.alwaysShow && col.fixed === undefined)
|
||||
.map(col => col.prop || col.label)
|
||||
}
|
||||
|
||||
// 获取所有可选择的列
|
||||
const selectableColumns = computed(() => {
|
||||
return actualColumns.value
|
||||
.filter(col => !col.alwaysShow && col.fixed === undefined)
|
||||
.map(col => col.prop || col.label)
|
||||
})
|
||||
|
||||
// 判断是否全选
|
||||
const isAllSelected = computed(() => {
|
||||
const selectable = selectableColumns.value
|
||||
if (selectable.length === 0) return false
|
||||
return selectable.every(col => checkedColumns.value.includes(col))
|
||||
})
|
||||
|
||||
// 切换全选/全不选
|
||||
const handleToggleSelectAll = () => {
|
||||
if (isAllSelected.value) {
|
||||
// 当前全选，执行全不选
|
||||
checkedColumns.value = []
|
||||
} else {
|
||||
// 当前未全选，执行全选
|
||||
checkedColumns.value = [...selectableColumns.value]
|
||||
}
|
||||
}
|
||||
|
||||
// 重置为默认值
|
||||
const handleReset = () => {
|
||||
checkedColumns.value = getDefaultColumns()
|
||||
handleColumnChange(checkedColumns.value)
|
||||
}
|
||||
|
||||
// 确认
|
||||
const handleConfirm = () => {
|
||||
handleColumnChange(checkedColumns.value)
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
emit('update:modelValue', value)
|
||||
emit('change', value)
|
||||
|
||||
// 如果使用自动提取，同步更新
|
||||
if (props.tableRef) {
|
||||
updateAutoVisibleColumns(value)
|
||||
} else {
|
||||
// 保存到 localStorage
|
||||
if (props.storageKey) {
|
||||
localStorage.setItem(props.storageKey, JSON.stringify(value))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 监听外部 modelValue 变化
|
||||
watch(() => props.modelValue, (newVal) => {
|
||||
if (newVal && newVal.length > 0) {
|
||||
checkedColumns.value = [...newVal]
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
initCheckedColumns()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table-column-control {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.column-control-content {
|
||||
.column-control-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 12px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
|
||||
.header-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.column-control-body {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.column-checkbox-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px 16px;
|
||||
}
|
||||
|
||||
.column-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 120px;
|
||||
|
||||
:deep(.el-checkbox) {
|
||||
margin-right: 0;
|
||||
|
||||
.el-checkbox__label {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.column-control-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user