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) {
const { lastShowIndex } = this.state;
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表头前，将其置空
const rows = this.getHeaderRows(columns);
if (expandIconAsCell && fixed !== 'right') {
@ -486,6 +486,7 @@ class Table extends Component {
bordered = {bordered}
leftFixedWidth = {leftFixedWidth}
rightFixedWidth = {rightFixedWidth}
bodyDisplayInRow = {bodyDisplayInRow}
/>
) : null;
}

24
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.innerTableBody= contentTable.querySelector('.u-table-scroll .u-table-body table');
table.fixedLeftBodyRows = table.fixedLeftBodyTable && table.fixedLeftBodyTable.querySelectorAll('tr') || [];
table.fixedRightBodyRows = table.fixedRightBodyTable && table.fixedRightBodyTable.querySelectorAll('tr') || [];
this.table = table;
if(!this.props.dragborder)return;
@ -324,7 +325,7 @@ class TableHeader extends Component {
*/
onTrMouseMove = (e) => {
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);
let event = Event.getEvent(e);
if(this.props.dragborder && this.drag.option == "border"){
@ -336,14 +337,19 @@ class TableHeader extends Component {
if(newWidth > this.minWidth){
currentCols.style.width = newWidth +'px';
// displayinrow 判断、 固定行高判断
this.table.bodyRows.forEach((row,index)=>{
const leftRow = this.table.fixedLeftBodyRows[index]
if(leftRow) {
const height = row.getBoundingClientRect().height;
leftRow.style.height = height + "px";
}
})
// displayinrow 判断、 固定行高判断
if(!bodyDisplayInRow) {
this.table.bodyRows.forEach((row,index)=>{
const leftRow = this.table.fixedLeftBodyRows[index];
const rightRow = this.table.fixedRightBodyRows[index];
if(leftRow || rightRow) {
const height = row.getBoundingClientRect().height;
leftRow && (leftRow.style.height = height + "px")
rightRow && (rightRow.style.height = height + "px")
}
})
}
//hao 支持固定表头拖拽 修改表体的width
if(this.fixedTable.cols){
this.fixedTable.cols[this.drag.currIndex].style.width = newWidth + "px";