ren
This commit is contained in:
@@ -53,24 +53,17 @@ export function useTableColumns(
|
||||
|
||||
// 从 el-table 提取列配置
|
||||
const extractColumns = (): ColumnConfig[] => {
|
||||
console.log('[useTableColumns] extractColumns 开始执行')
|
||||
|
||||
const tableInstance = getTableInstance()
|
||||
if (!tableInstance) {
|
||||
console.warn('[useTableColumns] tableRef.value 为空')
|
||||
console.warn('[useTableColumns] tableRef:', tableRef)
|
||||
console.warn('[useTableColumns] tableRef?.value:', tableRef?.value)
|
||||
return []
|
||||
}
|
||||
|
||||
const table = tableInstance
|
||||
console.log('[useTableColumns] tableInstance 存在:', table)
|
||||
const extracted: ColumnConfig[] = []
|
||||
|
||||
try {
|
||||
// 方法1: 从 table.store 中提取(Element Plus 内部实现)
|
||||
const store = (table as any).store
|
||||
console.log('[useTableColumns] store:', store)
|
||||
|
||||
if (store) {
|
||||
// 尝试多种路径访问列数据
|
||||
@@ -78,40 +71,24 @@ export function useTableColumns(
|
||||
|
||||
if (store.states && store.states.columns) {
|
||||
tableColumns = store.states.columns.value || []
|
||||
console.log('[useTableColumns] 从 store.states.columns 获取到列数:', tableColumns.length)
|
||||
console.log('[useTableColumns] store.states.columns 内容:', tableColumns)
|
||||
} else if (store.columns) {
|
||||
tableColumns = Array.isArray(store.columns) ? store.columns : (store.columns.value || [])
|
||||
console.log('[useTableColumns] 从 store.columns 获取到列数:', tableColumns.length)
|
||||
} else if ((table as any).columns) {
|
||||
tableColumns = Array.isArray((table as any).columns) ? (table as any).columns : ((table as any).columns.value || [])
|
||||
console.log('[useTableColumns] 从 table.columns 获取到列数:', tableColumns.length)
|
||||
}
|
||||
|
||||
if (tableColumns.length > 0) {
|
||||
tableColumns.forEach((col: any, idx: number) => {
|
||||
console.log(`[useTableColumns] store 列 ${idx}:`, {
|
||||
type: col.type,
|
||||
label: col.label,
|
||||
property: col.property,
|
||||
prop: col.prop,
|
||||
fixed: col.fixed,
|
||||
fullCol: col
|
||||
})
|
||||
|
||||
tableColumns.forEach((col: any) => {
|
||||
// 跳过序号列
|
||||
if (col.type === 'index' || col.type === 'selection') {
|
||||
console.log(`[useTableColumns] 列 ${idx} 被跳过(类型: ${col.type})`)
|
||||
return
|
||||
}
|
||||
|
||||
// 尝试多种方式获取 label
|
||||
const label = col.label || col.columnKey || col.property || col.prop || ''
|
||||
|
||||
// 如果没有 label,尝试从其他属性推断
|
||||
// 如果没有 label,跳过这一列
|
||||
if (!label) {
|
||||
console.log(`[useTableColumns] 列 ${idx} 没有 label,尝试从其他属性推断`)
|
||||
// 如果还是没有,跳过这一列
|
||||
return
|
||||
}
|
||||
|
||||
@@ -140,22 +117,17 @@ export function useTableColumns(
|
||||
}
|
||||
}
|
||||
|
||||
console.log(`[useTableColumns] 从 store 提取到列配置:`, config)
|
||||
extracted.push(config)
|
||||
})
|
||||
|
||||
console.log('[useTableColumns] 从 store 总共提取到列数:', extracted.length)
|
||||
if (extracted.length > 0) {
|
||||
return extracted
|
||||
}
|
||||
} else {
|
||||
console.warn('[useTableColumns] store 中没有找到列数据')
|
||||
}
|
||||
}
|
||||
|
||||
// 方法2: 从 DOM 中提取(备用方案,更可靠)
|
||||
const tableEl = (table as any).$el
|
||||
console.log('[useTableColumns] tableEl:', tableEl)
|
||||
|
||||
if (tableEl) {
|
||||
// 尝试多种选择器来查找表头
|
||||
@@ -163,35 +135,27 @@ export function useTableColumns(
|
||||
|
||||
// 方法2.1: 从主表格头部查找
|
||||
const headerWrapper = tableEl.querySelector('.el-table__header-wrapper')
|
||||
console.log('[useTableColumns] headerWrapper:', headerWrapper)
|
||||
if (headerWrapper) {
|
||||
columnHeaders = headerWrapper.querySelectorAll('th')
|
||||
console.log('[useTableColumns] 从 headerWrapper 找到列数:', columnHeaders?.length || 0)
|
||||
}
|
||||
|
||||
// 方法2.2: 如果找不到,从整个表格查找
|
||||
if (!columnHeaders || columnHeaders.length === 0) {
|
||||
columnHeaders = tableEl.querySelectorAll('th')
|
||||
console.log('[useTableColumns] 从整个表格找到列数:', columnHeaders?.length || 0)
|
||||
}
|
||||
|
||||
// 方法2.3: 如果还是找不到,尝试查找固定列
|
||||
if (!columnHeaders || columnHeaders.length === 0) {
|
||||
const fixedLeft = tableEl.querySelector('.el-table__fixed-left')
|
||||
console.log('[useTableColumns] fixedLeft:', fixedLeft)
|
||||
if (fixedLeft) {
|
||||
columnHeaders = fixedLeft.querySelectorAll('th')
|
||||
console.log('[useTableColumns] 从 fixedLeft 找到列数:', columnHeaders?.length || 0)
|
||||
}
|
||||
}
|
||||
|
||||
if (!columnHeaders || columnHeaders.length === 0) {
|
||||
console.warn('[useTableColumns] 未找到任何列头元素')
|
||||
return []
|
||||
}
|
||||
|
||||
console.log('[useTableColumns] 最终找到列数量:', columnHeaders.length)
|
||||
|
||||
// 创建一个映射,通过列索引匹配 prop
|
||||
const propMap = new Map<number, string>()
|
||||
|
||||
@@ -235,20 +199,8 @@ export function useTableColumns(
|
||||
|
||||
const label = rawLabel.trim()
|
||||
|
||||
// 调试:打印 th 的完整结构
|
||||
console.log(`[useTableColumns] DOM 列 ${index}:`, {
|
||||
label,
|
||||
rawLabel,
|
||||
thHTML: th.innerHTML.substring(0, 100),
|
||||
hasCell: !!cell,
|
||||
cellText: cell?.innerText || cell?.textContent || '',
|
||||
thInnerText: th.innerText,
|
||||
thTextContent: th.textContent
|
||||
})
|
||||
|
||||
// 排除序号列和空列
|
||||
if (!label || label === '序号') {
|
||||
console.log(`[useTableColumns] 列 ${index} 被跳过(序号列或空列)`)
|
||||
return
|
||||
}
|
||||
|
||||
@@ -278,51 +230,30 @@ export function useTableColumns(
|
||||
// 尝试从对应的 body cell 中获取 data-key 或其他属性来匹配 prop
|
||||
let prop = propMap.get(index)
|
||||
|
||||
// 如果没有找到 prop,尝试从 label 推断(简单匹配)
|
||||
// 如果没有找到 prop,使用 label 作为 prop(isColumnVisible 会同时匹配 prop 和 label)
|
||||
// 或者使用默认的 column_${index}
|
||||
if (!prop) {
|
||||
// 对于常见的列,可以通过 label 推断 prop
|
||||
const labelToPropMap: Record<string, string> = {
|
||||
'是否退休': 'tied',
|
||||
'姓名/工号': 'nameNo',
|
||||
'性别': 'sex',
|
||||
'部门': 'deptName',
|
||||
'学历学位': 'dgreeName',
|
||||
'职称等级': 'professionalTitle',
|
||||
'岗位级别': 'stationLevelName',
|
||||
'职业资格等级': 'levelName',
|
||||
'职业资格工种': 'workName',
|
||||
'用工性质': 'employmentNatureName',
|
||||
'手机': 'telPhone',
|
||||
'家庭住址': 'homeAddress',
|
||||
'授课类型': 'teacherCate',
|
||||
'操作': 'action',
|
||||
}
|
||||
prop = labelToPropMap[label]
|
||||
prop = `column_${index}`
|
||||
}
|
||||
|
||||
const columnConfig = {
|
||||
prop: prop || `column_${index}`,
|
||||
prop: prop,
|
||||
label,
|
||||
width,
|
||||
// DOM 提取的 fixed 只有 left/right,这里也归一为 undefined 或 'left'/'right'
|
||||
fixed: fixed ? fixed : undefined,
|
||||
}
|
||||
console.log(`[useTableColumns] 提取到列配置:`, columnConfig)
|
||||
extracted.push(columnConfig)
|
||||
})
|
||||
|
||||
console.log('[useTableColumns] 总共提取到列数:', extracted.length)
|
||||
if (extracted.length > 0) {
|
||||
console.log('[useTableColumns] 提取到的所有列:', extracted)
|
||||
return extracted
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
// 提取失败,输出错误信息
|
||||
console.error('[useTableColumns] 提取列配置时出错:', error)
|
||||
// 提取失败,静默处理
|
||||
}
|
||||
|
||||
console.warn('[useTableColumns] 提取失败,返回空数组')
|
||||
return []
|
||||
}
|
||||
|
||||
@@ -418,8 +349,6 @@ export function useTableColumns(
|
||||
}
|
||||
hasInitializedVisibleColumns.value = true
|
||||
}
|
||||
} else {
|
||||
console.warn('[useTableColumns] initColumns: 提取失败,未设置 columns.value')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -490,19 +419,17 @@ export function useTableColumns(
|
||||
return null
|
||||
}, (newVal, oldVal) => {
|
||||
if (newVal && newVal !== oldVal) {
|
||||
console.log('[useTableColumns] tableRef.value 变化,开始提取列配置')
|
||||
// 延迟一下,确保表格已经渲染
|
||||
setTimeout(() => {
|
||||
initColumns()
|
||||
}, 200)
|
||||
} else if (newVal && !oldVal) {
|
||||
// 如果从 undefined 变为有值,也触发提取
|
||||
console.log('[useTableColumns] tableRef.value 从 undefined 变为有值,开始提取列配置')
|
||||
setTimeout(() => {
|
||||
initColumns()
|
||||
}, 200)
|
||||
}
|
||||
}, { immediate: true }) // 改为 true,立即检查一次
|
||||
}, { immediate: true })
|
||||
|
||||
// 组件挂载后初始化
|
||||
onMounted(() => {
|
||||
@@ -513,8 +440,6 @@ export function useTableColumns(
|
||||
setTimeout(() => {
|
||||
initColumns()
|
||||
}, 300)
|
||||
} else {
|
||||
console.log('[useTableColumns] onMounted: tableRef.value 还未就绪,等待 watch 触发')
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user