zq
2 months ago
5 changed files with 864 additions and 209 deletions
@ -0,0 +1,228 @@ |
|||||
|
import ResizeObserver from 'resize-observer-polyfill'; |
||||
|
import { |
||||
|
debounce |
||||
|
} from 'lodash-es'; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
tableResizeObserver: null, |
||||
|
tableWidth: 0 |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
// 初始化表格宽度监听
|
||||
|
initTableResizeObserver(tableRef, containerRef) { |
||||
|
this.$nextTick(() => { |
||||
|
const container = containerRef ? this.$refs[containerRef] : this.$el; |
||||
|
if (!container) { |
||||
|
console.warn('Table container not found'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 先断开已有观察者
|
||||
|
this.destroyTableResizeObserver(); |
||||
|
|
||||
|
this.tableResizeObserver = new ResizeObserver( |
||||
|
debounce(entries => { |
||||
|
const entry = entries[0]; |
||||
|
const newWidth = entry.contentRect.width; |
||||
|
|
||||
|
if (Math.abs(newWidth - this.tableWidth) > 5) { |
||||
|
this.tableWidth = newWidth; |
||||
|
this.syncTableColumns(tableRef); |
||||
|
} |
||||
|
}, 100) |
||||
|
); |
||||
|
|
||||
|
try { |
||||
|
this.tableResizeObserver.observe(container); |
||||
|
} catch (err) { |
||||
|
console.error('Failed to observe table:', err); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 同步表头和表体列宽
|
||||
|
syncTableColumns(tableRef) { |
||||
|
// const table = this.$refs[tableRef];
|
||||
|
const table = this.$refs[tableRef].$refs.guiptable; |
||||
|
// console.log(table, 'table====--');
|
||||
|
if (!table) return; |
||||
|
let columns = table.columns; |
||||
|
// console.log(table,table['columns'],table.bodyWidth,'table.columns===');
|
||||
|
// 计算各列宽度（由具体组件实现）
|
||||
|
const columnWidths = this.calculateColumnWidths(); |
||||
|
if (!columnWidths) return; |
||||
|
// console.log(columnWidths, 'table.columns===');
|
||||
|
// 设置列宽并同步表头表体
|
||||
|
this.$nextTick(() => { |
||||
|
// 设置列定义中的宽度
|
||||
|
columns.forEach(column => { |
||||
|
// console.log(column.property,'columns====columns');
|
||||
|
if (columnWidths[column.property]) { |
||||
|
column.width = columnWidths[column.property]; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 同步DOM元素的宽度
|
||||
|
// const headerCols = table.$el.querySelectorAll('.el-table__header col');
|
||||
|
// const bodyCols = table.$el.querySelectorAll('.el-table__body col');
|
||||
|
|
||||
|
// columns.forEach((column, index) => {
|
||||
|
// if (columnWidths[column.property] && headerCols[index] && bodyCols[index]) {
|
||||
|
// const width = columnWidths[column.property];
|
||||
|
// headerCols[index].width = width;
|
||||
|
// headerCols[index].style.setProperty('width',`${width}px`, 'important');
|
||||
|
// // headerCols[index].style.width = `${width}px`;
|
||||
|
// bodyCols[index].width = width;
|
||||
|
// bodyCols[index].style.setProperty('width',`${width}px`, 'important');
|
||||
|
// // bodyCols[index].style.width = `${width}px`;
|
||||
|
// }
|
||||
|
// });
|
||||
|
|
||||
|
// 强制表格重新布局
|
||||
|
table.doLayout(); |
||||
|
// this.syncFixedColumns(table);
|
||||
|
this.$nextTick(() => { |
||||
|
// 3. 同步主表格
|
||||
|
this.syncColumns( |
||||
|
table.$el, |
||||
|
columnWidths, |
||||
|
table.columns |
||||
|
); |
||||
|
|
||||
|
// 4. 同步固定列
|
||||
|
const fixedLeft = table.$el.querySelector('.el-table__fixed'); |
||||
|
const fixedRight = table.$el.querySelector('.el-table__fixed-right'); |
||||
|
|
||||
|
if (fixedLeft) this.syncColumns(fixedLeft, columnWidths, table.columns); |
||||
|
if (fixedRight) this.syncColumns(fixedRight, columnWidths, table.columns); |
||||
|
|
||||
|
// 5. 强制布局更新（需要两次nextTick确保固定列更新）
|
||||
|
this.$nextTick(() => { |
||||
|
table.doLayout(); |
||||
|
setTimeout(() => table.doLayout(), 50); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
syncColumns(container, columnWidths, columns) { |
||||
|
const headerCols = container.querySelectorAll('.el-table__header col, [class*=-header-wrapper] col'); |
||||
|
const bodyCols = container.querySelectorAll('.el-table__body col, [class*=-body-wrapper] col'); |
||||
|
|
||||
|
columns.forEach((column, index) => { |
||||
|
const width = columnWidths[column.property]; |
||||
|
if (width && headerCols[index] && bodyCols[index]) { |
||||
|
headerCols[index].width = width; |
||||
|
// headerCols[index].style.width = `${width}px`;
|
||||
|
headerCols[index].style.setProperty('width',`${width}px`, 'important'); |
||||
|
|
||||
|
bodyCols[index].width = width; |
||||
|
// bodyCols[index].style.width = `${width}px`;
|
||||
|
bodyCols[index].style.setProperty('width',`${width}px`, 'important'); |
||||
|
|
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// syncTableColumns(tableRef) {
|
||||
|
// const table = this.$refs[tableRef].$refs.guiptable;
|
||||
|
// if (!table) return;
|
||||
|
|
||||
|
// // 计算各列宽度
|
||||
|
// const columnWidths = this.calculateColumnWidths();
|
||||
|
// if (!columnWidths) return;
|
||||
|
|
||||
|
// this.$nextTick(() => {
|
||||
|
// // 1. 设置列定义的宽度
|
||||
|
// table.columns.forEach(column => {
|
||||
|
// if (columnWidths[column.property]) {
|
||||
|
// column.width = columnWidths[column.property];
|
||||
|
// column.realWidth = columnWidths[column.property]; // 关键：设置realWidth
|
||||
|
// }
|
||||
|
// });
|
||||
|
|
||||
|
// // 2. 同步DOM元素的宽度
|
||||
|
// const headerCols = table.$el.querySelectorAll('.el-table__header col');
|
||||
|
// const bodyCols = table.$el.querySelectorAll('.el-table__body col');
|
||||
|
// const headerCells = table.$el.querySelectorAll('.el-table__header .cell');
|
||||
|
// // const bodyCells = table.$el.querySelectorAll('.el-table__body .cell');
|
||||
|
|
||||
|
// table.columns.forEach((column, index) => {
|
||||
|
// if (columnWidths[column.property]) {
|
||||
|
// const width = columnWidths[column.property];
|
||||
|
|
||||
|
// // 同步colgroup中的宽度
|
||||
|
// if (headerCols[index]) {
|
||||
|
// headerCols[index].width = width;
|
||||
|
// headerCols[index].style.width = `${width}px`;
|
||||
|
// }
|
||||
|
// if (bodyCols[index]) {
|
||||
|
// bodyCols[index].width = width;
|
||||
|
// bodyCols[index].style.width = `${width}px`;
|
||||
|
// }
|
||||
|
|
||||
|
// // 同步单元格的实际宽度
|
||||
|
// if (headerCells[index]) {
|
||||
|
// headerCells[index].style.width = `${width}px`;
|
||||
|
// }
|
||||
|
// // body单元格通常不需要强制设置宽度
|
||||
|
// }
|
||||
|
// });
|
||||
|
|
||||
|
// // 3. 强制更新布局
|
||||
|
// table.store.scheduleLayout();
|
||||
|
|
||||
|
// // 4. 处理固定列
|
||||
|
// this.syncFixedColumns(table);
|
||||
|
// });
|
||||
|
// },
|
||||
|
|
||||
|
// syncFixedColumns(table) {
|
||||
|
// // 处理左侧固定列
|
||||
|
// const fixedLeftWrapper = table.$el.querySelector('.el-table__fixed');
|
||||
|
// if (fixedLeftWrapper) {
|
||||
|
// const fixedLeftCols = fixedLeftWrapper.querySelectorAll('col');
|
||||
|
// const originalCols = table.$el.querySelectorAll('.el-table__header col');
|
||||
|
|
||||
|
// fixedLeftCols.forEach((col, index) => {
|
||||
|
// if (originalCols[index]) {
|
||||
|
// const width = originalCols[index].width;
|
||||
|
// col.width = width;
|
||||
|
// // col.style.width = `${width}px`;
|
||||
|
// col.style.setProperty('width',`${width}px`, 'important');
|
||||
|
|
||||
|
// }
|
||||
|
// });
|
||||
|
|
||||
|
// // 强制重绘固定列
|
||||
|
// fixedLeftWrapper.style.display = 'none';
|
||||
|
// this.$nextTick(() => {
|
||||
|
// fixedLeftWrapper.style.display = '';
|
||||
|
// });
|
||||
|
// }
|
||||
|
|
||||
|
// // 同样处理右侧固定列...
|
||||
|
// },
|
||||
|
|
||||
|
|
||||
|
// 销毁观察者
|
||||
|
destroyTableResizeObserver() { |
||||
|
if (this.tableResizeObserver) { |
||||
|
this.tableResizeObserver.disconnect(); |
||||
|
this.tableResizeObserver = null; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 需要组件自己实现的计算列宽方法
|
||||
|
calculateColumnWidths() { |
||||
|
throw new Error('Component must implement calculateColumnWidths method'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
beforeDestroy() { |
||||
|
this.destroyTableResizeObserver(); |
||||
|
} |
||||
|
}; |
||||
Loading…
Reference in new issue