innov
/
bee-table
1
0
Fork 0
Code Issues Pull Requests 3 Projects Releases Wiki Activity

fix: 拖拽列宽同步固定列的高度

This commit is contained in:
izbz wh 2020-08-29 15:22:36 +08:00
parent 422c4821a7
commit c29a6cf112
3 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
.huskyrc1 → .huskyrc
View File

3
src/Table.js
View File

@ -436,7 +436,7 @@ class Table extends Component {
getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) { getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
const { lastShowIndex } = this.state; const { lastShowIndex } = this.state;
const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop,onDragEnd, draggable, const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop,onDragEnd, draggable,
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder,onDraggingBorder} = this.props; onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder,onDraggingBorder, bodyDisplayInRow} = this.props;
this.columnsChildrenList = []; //复杂表头拖拽，重新render表头前，将其置空 this.columnsChildrenList = []; //复杂表头拖拽，重新render表头前，将其置空
const rows = this.getHeaderRows(columns); const rows = this.getHeaderRows(columns);
if (expandIconAsCell && fixed !== 'right') { if (expandIconAsCell && fixed !== 'right') {
@ -486,6 +486,7 @@ class Table extends Component {
bordered = {bordered} bordered = {bordered}
leftFixedWidth = {leftFixedWidth} leftFixedWidth = {leftFixedWidth}
rightFixedWidth = {rightFixedWidth} rightFixedWidth = {rightFixedWidth}
bodyDisplayInRow = {bodyDisplayInRow}
/> />
) : null; ) : null;
} }

22
src/TableHeader.js
View File

@ -112,6 +112,7 @@ class TableHeader extends Component {
table.fixedRightBodyTable = contentTable.querySelector('.u-table-fixed-right .u-table-body-outer') ; table.fixedRightBodyTable = contentTable.querySelector('.u-table-fixed-right .u-table-body-outer') ;
table.innerTableBody= contentTable.querySelector('.u-table-scroll .u-table-body table'); table.innerTableBody= contentTable.querySelector('.u-table-scroll .u-table-body table');
table.fixedLeftBodyRows = table.fixedLeftBodyTable && table.fixedLeftBodyTable.querySelectorAll('tr') || []; table.fixedLeftBodyRows = table.fixedLeftBodyTable && table.fixedLeftBodyTable.querySelectorAll('tr') || [];
table.fixedRightBodyRows = table.fixedRightBodyTable && table.fixedRightBodyTable.querySelectorAll('tr') || [];
this.table = table; this.table = table;
if(!this.props.dragborder)return; if(!this.props.dragborder)return;
@ -324,7 +325,7 @@ class TableHeader extends Component {
*/ */
onTrMouseMove = (e) => { onTrMouseMove = (e) => {
if(!this.props.dragborder && !this.props.draggable)return; if(!this.props.dragborder && !this.props.draggable)return;
const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex,onDraggingBorder, leftFixedWidth, rightFixedWidth} = this.props; const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex,onDraggingBorder, leftFixedWidth, rightFixedWidth, bodyDisplayInRow} = this.props;
Event.stopPropagation(e); Event.stopPropagation(e);
let event = Event.getEvent(e); let event = Event.getEvent(e);
if(this.props.dragborder && this.drag.option == "border"){ if(this.props.dragborder && this.drag.option == "border"){
@ -337,13 +338,18 @@ class TableHeader extends Component {
currentCols.style.width = newWidth +'px'; currentCols.style.width = newWidth +'px';
// displayinrow 判断、 固定行高判断 // displayinrow 判断、 固定行高判断
this.table.bodyRows.forEach((row,index)=>{ if(!bodyDisplayInRow) {
const leftRow = this.table.fixedLeftBodyRows[index] this.table.bodyRows.forEach((row,index)=>{
if(leftRow) { const leftRow = this.table.fixedLeftBodyRows[index];
const height = row.getBoundingClientRect().height; const rightRow = this.table.fixedRightBodyRows[index];
leftRow.style.height = height + "px"; if(leftRow || rightRow) {
} const height = row.getBoundingClientRect().height;
}) leftRow && (leftRow.style.height = height + "px")
rightRow && (rightRow.style.height = height + "px")
}
})
}
//hao 支持固定表头拖拽 修改表体的width //hao 支持固定表头拖拽 修改表体的width
if(this.fixedTable.cols){ if(this.fixedTable.cols){
this.fixedTable.cols[this.drag.currIndex].style.width = newWidth + "px"; this.fixedTable.cols[this.drag.currIndex].style.width = newWidth + "px";