fix: footer 返回含有固定列Table时,拖拽主表格高度不同步

build/Table.js

@@ -163,7 +163,7 @@ var defaultProps = {
   minColumnWidth: 80,
   locale: {},
   syncHover: true,
-  setRowHeight: function setRowHeight() {},
+  // setRowHeight:()=>{},
   setRowParentIndex: function setRowParentIndex() {},
   tabIndex: '0',
   heightConsistent: false,
@@ -637,7 +637,8 @@ var Table = function (_Component) {
         headerScroll = _props2.headerScroll,
         bordered = _props2.bordered,
         onDropBorder = _props2.onDropBorder,
-        onDraggingBorder = _props2.onDraggingBorder;
+        onDraggingBorder = _props2.onDraggingBorder,
+        bodyDisplayInRow = _props2.bodyDisplayInRow;
 
     this.columnsChildrenList = []; //复杂表头拖拽，重新render表头前，将其置空
     var rows = this.getHeaderRows(columns);
@@ -684,7 +685,8 @@ var Table = function (_Component) {
       headerScroll: headerScroll,
       bordered: bordered,
       leftFixedWidth: leftFixedWidth,
-      rightFixedWidth: rightFixedWidth
+      rightFixedWidth: rightFixedWidth,
+      bodyDisplayInRow: bodyDisplayInRow
     })) : null;
   };
 

build/TableHeader.js

@@ -144,14 +144,27 @@ var TableHeader = function (_Component) {
       table.tr = tableDome.getElementsByTagName("tr");
       table.tableBody = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body');
       table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
-    }
+      table.bodyRows = table.tableBody && table.tableBody.querySelectorAll('tr') || [];
 
       table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
       table.fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
       table.contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
-    table.fixedLeftBodyTable = contentTable.querySelector('.u-table-fixed-left .u-table-body-outer');
+      table.fixedLeftBodyTable = contentTable.querySelectorAll('.u-table-fixed-left .u-table-body-outer');
-    table.fixedRightBodyTable = contentTable.querySelector('.u-table-fixed-right .u-table-body-outer');
+      if (table.fixedLeftBodyTable) {
+        var leftBodyTableIndex = table.fixedLeftBodyTable.length - 1 < 0 ? 0 : table.fixedLeftBodyTable.length - 1;
+        table.fixedLeftBodyTable = table.fixedLeftBodyTable[leftBodyTableIndex];
+      }
+
+      table.fixedRightBodyTable = contentTable.querySelectorAll('.u-table-fixed-right .u-table-body-outer');
+      if (table.fixedRightBodyTable) {
+        var rightBodyTableIndex = table.fixedRightBodyTable.length - 1 < 0 ? 0 : table.fixedRightBodyTable.length - 1;
+        table.fixedRightBodyTable = table.fixedRightBodyTable[rightBodyTableIndex];
+      }
+
       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;
 
@@ -654,7 +667,8 @@ var _initialiseProps = function _initialiseProps() {
         lastShowIndex = _props4.lastShowIndex,
         onDraggingBorder = _props4.onDraggingBorder,
         leftFixedWidth = _props4.leftFixedWidth,
-        rightFixedWidth = _props4.rightFixedWidth;
+        rightFixedWidth = _props4.rightFixedWidth,
+        bodyDisplayInRow = _props4.bodyDisplayInRow;
 
     _utils.Event.stopPropagation(e);
     var event = _utils.Event.getEvent(e);
@@ -666,6 +680,20 @@ var _initialiseProps = function _initialiseProps() {
       _this8.drag.newWidth = newWidth > 0 ? newWidth : _this8.minWidth;
       if (newWidth > _this8.minWidth) {
         currentCols.style.width = newWidth + 'px';
+
+        // displayinrow 判断、 固定行高判断 
+        if (!bodyDisplayInRow) {
+          _this8.table.bodyRows.forEach(function (row, index) {
+            var leftRow = _this8.table.fixedLeftBodyRows[index];
+            var rightRow = _this8.table.fixedRightBodyRows[index];
+            if (leftRow || rightRow) {
+              var height = row.getBoundingClientRect().height;
+              leftRow && (leftRow.style.height = height + "px");
+              rightRow && (rightRow.style.height = height + "px");
+            }
+          });
+        }
+
         //hao 支持固定表头拖拽 修改表体的width
         if (_this8.fixedTable.cols) {
           _this8.fixedTable.cols[_this8.drag.currIndex].style.width = newWidth + "px";

build/TableRow.js

@@ -59,7 +59,8 @@ var propTypes = {
   store: _propTypes2["default"].object.isRequired,
   rowDraggAble: _propTypes2["default"].bool,
   onDragRow: _propTypes2["default"].func,
-  onDragRowStart: _propTypes2["default"].func
+  onDragRowStart: _propTypes2["default"].func,
+  syncRowHeight: _propTypes2["default"].bool
 };
 
 var defaultProps = {
@@ -74,8 +75,9 @@ var defaultProps = {
 
   className: '',
   setRowParentIndex: function setRowParentIndex() {},
-  rowDraggAble: false
+  rowDraggAble: false,
   // onDragRow:()=>{}
+  syncRowHeight: false
 };
 
 var TableRow = function (_Component) {
@@ -423,7 +425,9 @@ var TableRow = function (_Component) {
 
 
   TableRow.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
-    var rowDraggAble = this.props.rowDraggAble;
+    var _props2 = this.props,
+        rowDraggAble = _props2.rowDraggAble,
+        syncRowHeight = _props2.syncRowHeight;
 
     if (!this.event) {
       this.event = true;
@@ -431,19 +435,20 @@ var TableRow = function (_Component) {
         this.initEvent();
       }
     }
-
     if (this.props.treeType) {
       this.setRowParentIndex();
     }
+    if (syncRowHeight) {
       this.setRowHeight();
+    }
   };
 
   TableRow.prototype.componentWillUnmount = function componentWillUnmount() {
-    var _props2 = this.props,
+    var _props3 = this.props,
-        record = _props2.record,
+        record = _props3.record,
-        onDestroy = _props2.onDestroy,
+        onDestroy = _props3.onDestroy,
-        index = _props2.index,
+        index = _props3.index,
-        rowDraggAble = _props2.rowDraggAble;
+        rowDraggAble = _props3.rowDraggAble;
 
     onDestroy(record, index);
     if (this.unsubscribe) {
@@ -455,23 +460,23 @@ var TableRow = function (_Component) {
   };
 
   TableRow.prototype.setRowHeight = function setRowHeight() {
-    var _props3 = this.props,
+    var _props4 = this.props,
-        setRowHeight = _props3.setRowHeight,
+        setRowHeight = _props4.setRowHeight,
-        _props3$expandedConte = _props3.expandedContentHeight,
+        _props4$expandedConte = _props4.expandedContentHeight,
-        expandedContentHeight = _props3$expandedConte === undefined ? 0 : _props3$expandedConte,
+        expandedContentHeight = _props4$expandedConte === undefined ? 0 : _props4$expandedConte,
-        fixed = _props3.fixed,
+        fixed = _props4.fixed,
-        fixedIndex = _props3.fixedIndex;
+        fixedIndex = _props4.fixedIndex;
 
     if (!setRowHeight || !this.element || fixed) return;
     setRowHeight(this.element.clientHeight + expandedContentHeight, fixedIndex);
   };
 
   TableRow.prototype.setRowParentIndex = function setRowParentIndex() {
-    var _props4 = this.props,
+    var _props5 = this.props,
-        index = _props4.index,
+        index = _props5.index,
-        setRowParentIndex = _props4.setRowParentIndex,
+        setRowParentIndex = _props5.setRowParentIndex,
-        fixedIndex = _props4.fixedIndex,
+        fixedIndex = _props5.fixedIndex,
-        rootIndex = _props4.rootIndex;
+        rootIndex = _props5.rootIndex;
 
     setRowParentIndex(rootIndex < 0 ? index : rootIndex, fixedIndex);
   };
@@ -481,16 +486,16 @@ var TableRow = function (_Component) {
     // 异步访问事件属性
     // 调用 event.persist() 会从事件池中移除该合成函数并允许对该合成事件的引用被保留下来。
     event.persist();
-    var _props5 = this.props,
+    var _props6 = this.props,
-        record = _props5.record,
+        record = _props6.record,
-        index = _props5.index,
+        index = _props6.index,
-        onRowClick = _props5.onRowClick,
+        onRowClick = _props6.onRowClick,
-        expandable = _props5.expandable,
+        expandable = _props6.expandable,
-        expandRowByClick = _props5.expandRowByClick,
+        expandRowByClick = _props6.expandRowByClick,
-        expanded = _props5.expanded,
+        expanded = _props6.expanded,
-        onExpand = _props5.onExpand,
+        onExpand = _props6.onExpand,
-        fixedIndex = _props5.fixedIndex,
+        fixedIndex = _props6.fixedIndex,
-        onRowDoubleClick = _props5.onRowDoubleClick;
+        onRowDoubleClick = _props6.onRowDoubleClick;
 
     if (expandable && expandRowByClick) {
       onExpand(!expanded, record, fixedIndex, event);
@@ -505,31 +510,17 @@ var TableRow = function (_Component) {
   };
 
   TableRow.prototype.onRowDoubleClick = function onRowDoubleClick(event) {
-    var _props6 = this.props,
+    var _props7 = this.props,
-        record = _props6.record,
+        record = _props7.record,
-        index = _props6.index,
+        index = _props7.index,
-        onRowDoubleClick = _props6.onRowDoubleClick,
+        onRowDoubleClick = _props7.onRowDoubleClick,
-        fixedIndex = _props6.fixedIndex;
+        fixedIndex = _props7.fixedIndex;
 
     this.clear();
     onRowDoubleClick && onRowDoubleClick(record, fixedIndex, event);
   };
 
   TableRow.prototype.onMouseEnter = function onMouseEnter(e) {
-    var _props7 = this.props,
-        onHover = _props7.onHover,
-        hoverKey = _props7.hoverKey,
-        fixedIndex = _props7.fixedIndex,
-        syncHover = _props7.syncHover,
-        record = _props7.record;
-
-    if (syncHover) {
-      this.setState({ hovered: true });
-    }
-    onHover(true, hoverKey, e, fixedIndex, record);
-  };
-
-  TableRow.prototype.onMouseLeave = function onMouseLeave(e) {
     var _props8 = this.props,
         onHover = _props8.onHover,
         hoverKey = _props8.hoverKey,
@@ -537,6 +528,20 @@ var TableRow = function (_Component) {
         syncHover = _props8.syncHover,
         record = _props8.record;
 
+    if (syncHover) {
+      this.setState({ hovered: true });
+    }
+    onHover(true, hoverKey, e, fixedIndex, record);
+  };
+
+  TableRow.prototype.onMouseLeave = function onMouseLeave(e) {
+    var _props9 = this.props,
+        onHover = _props9.onHover,
+        hoverKey = _props9.hoverKey,
+        fixedIndex = _props9.fixedIndex,
+        syncHover = _props9.syncHover,
+        record = _props9.record;
+
     if (syncHover) {
       this.setState({ hovered: false });
     }
@@ -544,33 +549,33 @@ var TableRow = function (_Component) {
   };
 
   TableRow.prototype.render = function render() {
-    var _props9 = this.props,
+    var _props10 = this.props,
-        clsPrefix = _props9.clsPrefix,
+        clsPrefix = _props10.clsPrefix,
-        columns = _props9.columns,
+        columns = _props10.columns,
-        record = _props9.record,
+        record = _props10.record,
-        height = _props9.height,
+        height = _props10.height,
-        visible = _props9.visible,
+        visible = _props10.visible,
-        index = _props9.index,
+        index = _props10.index,
-        onPaste = _props9.onPaste,
+        onPaste = _props10.onPaste,
-        expandIconColumnIndex = _props9.expandIconColumnIndex,
+        expandIconColumnIndex = _props10.expandIconColumnIndex,
-        expandIconAsCell = _props9.expandIconAsCell,
+        expandIconAsCell = _props10.expandIconAsCell,
-        expanded = _props9.expanded,
+        expanded = _props10.expanded,
-        useDragHandle = _props9.useDragHandle,
+        useDragHandle = _props10.useDragHandle,
-        rowDraggAble = _props9.rowDraggAble,
+        rowDraggAble = _props10.rowDraggAble,
-        expandable = _props9.expandable,
+        expandable = _props10.expandable,
-        onExpand = _props9.onExpand,
+        onExpand = _props10.onExpand,
-        needIndentSpaced = _props9.needIndentSpaced,
+        needIndentSpaced = _props10.needIndentSpaced,
-        indent = _props9.indent,
+        indent = _props10.indent,
-        indentSize = _props9.indentSize,
+        indentSize = _props10.indentSize,
-        isHiddenExpandIcon = _props9.isHiddenExpandIcon,
+        isHiddenExpandIcon = _props10.isHiddenExpandIcon,
-        fixed = _props9.fixed,
+        fixed = _props10.fixed,
-        bodyDisplayInRow = _props9.bodyDisplayInRow,
+        bodyDisplayInRow = _props10.bodyDisplayInRow,
-        expandedIcon = _props9.expandedIcon,
+        expandedIcon = _props10.expandedIcon,
-        collapsedIcon = _props9.collapsedIcon,
+        collapsedIcon = _props10.collapsedIcon,
-        hoverKey = _props9.hoverKey,
+        hoverKey = _props10.hoverKey,
-        lazyStartIndex = _props9.lazyStartIndex,
+        lazyStartIndex = _props10.lazyStartIndex,
-        lazyEndIndex = _props9.lazyEndIndex,
+        lazyEndIndex = _props10.lazyEndIndex,
-        expandIconCellWidth = _props9.expandIconCellWidth;
+        expandIconCellWidth = _props10.expandIconCellWidth;
 
     var showSum = false;
     var className = this.props.className;

src/TableHeader.js

@@ -103,16 +103,28 @@ class TableHeader extends Component {
       table.tableBody = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body');
       table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
       table.bodyRows = table.tableBody && table.tableBody.querySelectorAll('tr') || [];
-    }
    
       table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
       table.fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
       table.contentTableHeader  = contentTable.querySelector('.u-table-scroll .u-table-header');
-    table.fixedLeftBodyTable = contentTable.querySelector('.u-table-fixed-left .u-table-body-outer') ;
+      table.fixedLeftBodyTable = contentTable.querySelectorAll('.u-table-fixed-left .u-table-body-outer') ;
-    table.fixedRightBodyTable = contentTable.querySelector('.u-table-fixed-right .u-table-body-outer') ;
+      if (table.fixedLeftBodyTable) {
+        const leftBodyTableIndex =  table.fixedLeftBodyTable.length-1 < 0 ? 0 : table.fixedLeftBodyTable.length-1
+        table.fixedLeftBodyTable = table.fixedLeftBodyTable[leftBodyTableIndex]
+      }
+     
+      table.fixedRightBodyTable = contentTable.querySelectorAll('.u-table-fixed-right .u-table-body-outer') ;
+      if (table.fixedRightBodyTable) {
+        const rightBodyTableIndex = table.fixedRightBodyTable.length-1 < 0 ? 0 : table.fixedRightBodyTable.length-1
+        table.fixedRightBodyTable = table.fixedRightBodyTable[rightBodyTableIndex]
+      }
+
       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;