fix: remove loading

build/Table.css

@@ -902,3 +902,17 @@
   line-height: 30px; }
   .u-dropdown ul.u-table-inline-op-dropdowm li.u-dropdown-menu-item i.uf {
     font-size: 12px; }
+
+.loading-td {
+  position: relative !important;
+  display: block !important; }
+  .loading-td.pre-td {
+    bottom: 0; }
+
+.loading-div {
+  position: absolute;
+  border: none !important; }
+  .loading-div.pre {
+    bottom: 0; }
+  .loading-div.suf {
+    top: 0; }

build/Table.js

@@ -168,6 +168,7 @@ var defaultProps = {
   setRowParentIndex: function setRowParentIndex() {},
   tabIndex: '0',
   heightConsistent: false,
+  syncFixedRowHeight: false,
   size: 'md',
   rowDraggAble: false,
   hideDragHandle: false,
@@ -241,6 +242,9 @@ var Table = function (_Component) {
         }
       });
       if (currentIndex > -1) {
+        if (_this.contentTable.dragType == 'top') {
+          targetIndex = targetIndex - 1;
+        }
         data = _this.swapArray(data, currentIndex, targetIndex);
         _this.props.onDropRow && _this.props.onDropRow(data, record, targetIndex);
         _this.setState({
@@ -289,6 +293,17 @@ var Table = function (_Component) {
       return Number(tdPaddingTop.replace('px', '')) + Number(tdPaddingBottom.replace('px', '')) + Number(tdBorderTop.replace('px', '')) + Number(tdBorderBottom.replace('px', ''));
     };
 
+    _this.getFlatRecords = function (data) {
+      var result = [];
+      for (var i = 0; i < data.length; i++) {
+        result.push(data[i]);
+        if ((data[i].children || []).length) {
+          result = result.concat(_this.getFlatRecords(data[i].children));
+        }
+      }
+      return result;
+    };
+
     _this.clearBodyMouseLeaveTimer = function () {
       if (_this.bodyMouseLeaveTimmer) {
         clearTimeout(_this.bodyMouseLeaveTimmer);
@@ -370,6 +385,7 @@ var Table = function (_Component) {
     _this.getFooter = _this.getFooter.bind(_this);
     _this.getEmptyText = _this.getEmptyText.bind(_this);
     _this.getHeaderRowStyle = _this.getHeaderRowStyle.bind(_this);
+    _this.manualSyncFixedTableRowHeight = _this.manualSyncFixedTableRowHeight.bind(_this);
     _this.syncFixedTableRowHeight = _this.syncFixedTableRowHeight.bind(_this);
     _this.resetScrollX = _this.resetScrollX.bind(_this);
     _this.findExpandedRow = _this.findExpandedRow.bind(_this);
@@ -384,6 +400,7 @@ var Table = function (_Component) {
     _this.leftColumnsLength; //左侧固定列的长度
     _this.centerColumnsLength; //非固定列的长度
     _this.columnsChildrenList = []; //复杂表头、所有叶子节点
+    _this.dataChanged = false; // 数据是否改变
     return _this;
   }
 
@@ -478,9 +495,59 @@ var Table = function (_Component) {
     // if (prevProps.data.length === 0  || this.props.data.length === 0 ) {
     //   this.resetScrollX();
     // }
+    // 当懒加载手动设置的scroll.y发生变化时，滚动条回到顶部
+    var prevScrollY = prevProps.scroll.y;
+    var currentScrollY = this.props.scroll.y;
+    if (prevScrollY && currentScrollY && prevScrollY !== currentScrollY && this.props.lazyLoad && !this.props.ignoreScrollYChange) {
+      this.bodyTable.scrollTop = 0;
+    } else if (this.props.ignoreScrollYChange && currentScrollY && prevScrollY && prevScrollY !== currentScrollY) {
+      var bodyScrollTop = this.bodyTable.scrollTop;
+      if (bodyScrollTop === 0) {
+        // 在顶部的时候，滚动条不用动
+        this.bodyTable.scrollTop = 0;
+      } else {
+        var distance = bodyScrollTop + currentScrollY - prevScrollY;
+        if (distance < 0) {
+          this.bodyTable.scrollTop = 0;
+        } else {
+          var _bodyTable = this.bodyTable,
+              scrollHeight = _bodyTable.scrollHeight,
+              scrollTop = _bodyTable.scrollTop;
 
+          var bottomDistance = Math.abs(scrollHeight - scrollTop - prevScrollY); // 在最底部的时候也不用滚动滚动条
+          if (bottomDistance < 5) {
+            // 有些dom计算不是十分精确，设置一个值来缓冲一下
+            this.bodyTable.scrollTop = scrollTop + prevScrollY - currentScrollY;
+          } else {
+            this.bodyTable.scrollTop = distance;
+          }
+        }
+      }
+    }
     // 是否传入 scroll中的y属性，如果传入判断是否是整数，如果是则进行比较 。bodyTable 的clientHeight进行判断
     this.isShowScrollY();
+    if (this.bodyTable) {
+      var currentOverflowX = window.getComputedStyle(this.bodyTable).overflowX;
+      if (!this.props.scroll.x && currentOverflowX === 'scroll') {
+        this.bodyTable.style.overflowX = 'hidden';
+      }
+      if (this.props.scroll.x && currentOverflowX !== 'scroll') {
+        // 此处应该对比一下实际的
+        if (this.computeWidth > this.contentDomWidth) {
+          this.bodyTable.style.overflowX = 'scroll';
+        }
+      }
+    }
+    if (this.bodyTableOuter) {
+      // 隐藏几个不需要真正滚动的父元素的滚动条
+      this.bodyTableOuter.style.overflowY = 'hidden';
+    }
+    if (this.fixedColumnsBodyLeftOuter) {
+      this.fixedColumnsBodyLeftOuter.style.overflowY = 'hidden';
+    }
+    if (this.fixedColumnsBodyRightOuter) {
+      this.fixedColumnsBodyRightOuter.style.overflowY = 'hidden';
+    }
   };
 
   Table.prototype.componentWillUnmount = function componentWillUnmount() {
@@ -916,7 +983,7 @@ var Table = function (_Component) {
     var expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
     var expandIconColumnIndex = props.expandIconColumnIndex;
     if (props.lazyLoad && props.lazyLoad.preHeight && indent == 0) {
-      rst.push(_react2["default"].createElement(_TableRow2["default"], { onPaste: onPaste, height: props.lazyLoad.preHeight, columns: [], className: '', key: 'table_row_first', store: this.store, visible: true }));
+      rst.push(_react2["default"].createElement(_TableRow2["default"], { onPaste: onPaste, containerWidth: this.contentDomWidth, isPre: true, height: props.lazyLoad.preHeight, columns: [], className: '', key: 'table_row_first', store: this.store, visible: true }));
     }
     var lazyCurrentIndex = props.lazyLoad && props.lazyLoad.startIndex ? props.lazyLoad.startIndex : 0;
     var lazyParentIndex = props.lazyLoad && props.lazyLoad.startParentIndex ? props.lazyLoad.startParentIndex : 0;
@@ -926,7 +993,7 @@ var Table = function (_Component) {
       var record = data[i];
       var key = this.getRowKey(record, i);
       // 兼容 NCC 以前的业务逻辑，支持外部通过 record 中的 isleaf 字段，判断是否为叶子节点
-      record['_isLeaf'] = typeof record['isleaf'] === 'boolean' ? record['isleaf'] : record['_isLeaf'];
+      typeof record['isleaf'] === 'boolean' && (record['_isLeaf'] = record['isleaf']);
       // _isLeaf 字段是在 bigData 里添加的，只有层级树大数据场景需要该字段
       // _isLeaf 有三种取值情况：true / false / null。（Table内部字段）
       var _isLeaf = typeof record['_isLeaf'] === 'boolean' ? record['_isLeaf'] : null;
@@ -1049,7 +1116,7 @@ var Table = function (_Component) {
     }
 
     if (props.lazyLoad && props.lazyLoad.sufHeight && indent == 0) {
-      rst.push(_react2["default"].createElement(_TableRow2["default"], { onPaste: onPaste, height: props.lazyLoad.sufHeight, key: 'table_row_end', columns: [], className: '', store: this.store, visible: true }));
+      rst.push(_react2["default"].createElement(_TableRow2["default"], { onPaste: onPaste, containerWidth: this.contentDomWidth, isSuf: true, height: props.lazyLoad.sufHeight, key: 'table_row_end', columns: [], className: '', store: this.store, visible: true }));
     }
     if (!this.isTreeType) {
       this.treeType = false;
@@ -1165,7 +1232,7 @@ var Table = function (_Component) {
       if (this.props.data.length == 0 && this.props.headerScroll) {
         bodyStyle.overflowX = 'hidden';
       }
-      if (!footerScroll) {
+      if (!footerScroll && this.computeWidth > this.contentDomWidth) {
         bodyStyle.overflowX = bodyStyle.overflowX || 'auto';
       }
     }
@@ -1177,6 +1244,11 @@ var Table = function (_Component) {
         // bodyStyle.height = bodyStyle.height || scroll.y;
         innerBodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
         innerBodyStyle.overflowY = bodyStyle.overflowY || 'scroll';
+        if (this.computeWidth > this.contentDomWidth) {
+          innerBodyStyle.overflowX = 'scroll';
+        } else if (this.contentWidth === this.contentDomWidth) {
+          innerBodyStyle.overflowX = 'hidden';
+        }
       } else {
         bodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
       }
@@ -1210,7 +1282,9 @@ var Table = function (_Component) {
               headStyle.overflow = 'hidden';
               innerBodyStyle.overflowX = 'auto'; //兼容expand场景、子表格含有固定列的场景
             } else {
-              bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
+              if (this.computeWidth > this.contentDomWidth) {
+                bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
+              }
             }
           } else {
             // 没有数据时，表头滚动条隐藏问题
@@ -1246,6 +1320,9 @@ var Table = function (_Component) {
       if (!fixed && _this4.contentDomWidth < _this4.contentWidth) {
         tableStyle.width = _this4.contentWidth - _this4.columnManager.getLeftColumnsWidth(_this4.contentWidth) - _this4.columnManager.getRightColumnsWidth(_this4.contentWidth);
       }
+      if (_this4.bodyTable && !fixed && _this4.contentDomWidth === _this4.contentWidth) {
+        tableStyle.width = _this4.bodyTable.clientWidth;
+      }
       var tableBody = hasBody ? getBodyWrapper(_react2["default"].createElement(
         'tbody',
         { className: clsPrefix + '-tbody', onMouseLeave: _this4.onBodyMouseLeave },
@@ -1262,7 +1339,6 @@ var Table = function (_Component) {
     };
 
     var headTable = void 0;
-
     if (useFixedHeader) {
       headTable = _react2["default"].createElement(
         'div',
@@ -1284,16 +1360,21 @@ var Table = function (_Component) {
       {
         className: clsPrefix + '-body',
         style: bodyStyle,
-        ref: function ref(el) {
-          _this4.bodyTable = el;
-        },
         onMouseOver: this.detectScrollTarget,
         onTouchStart: this.detectScrollTarget,
-        onScroll: this.handleBodyScroll,
+        ref: function ref(el) {
+          _this4.bodyTableOuter = el;
+        },
         onMouseLeave: this.onBodyMouseLeave
       },
       this.renderDragHideTable(),
-      renderTable(!useFixedHeader)
+      _react2["default"].createElement(
+        'div',
+        { className: 'scroll-container', onScroll: this.handleBodyScroll, ref: function ref(el) {
+            _this4.bodyTable = el;
+          }, style: _extends({}, bodyStyle) },
+        renderTable(!useFixedHeader)
+      )
     );
 
     if (fixed && columns.length) {
@@ -1316,12 +1397,17 @@ var Table = function (_Component) {
           {
             style: _extends({}, innerBodyStyle),
             className: clsPrefix + '-body-inner',
-            ref: refName,
+            ref: function ref(el) {
+              return _this4[refName + 'Outer'] = el;
+            },
             onMouseOver: this.detectScrollTarget,
-            onTouchStart: this.detectScrollTarget,
+            onTouchStart: this.detectScrollTarget
-            onScroll: this.handleBodyScroll
           },
-          renderTable(!useFixedHeader)
+          _react2["default"].createElement(
+            'div',
+            { className: 'fixed-scroll-container', ref: refName, style: _extends({}, innerBodyStyle), onScroll: this.handleBodyScroll },
+            renderTable(!useFixedHeader)
+          )
         )
       );
     }
@@ -1415,9 +1501,12 @@ var Table = function (_Component) {
     }
   };
 
-  Table.prototype.syncFixedTableRowHeight = function syncFixedTableRowHeight() {
+  Table.prototype.manualSyncFixedTableRowHeight = function manualSyncFixedTableRowHeight() {
-    var _this5 = this;
+    this.dataChanged = true;
+    this.syncFixedTableRowHeight();
+  };
 
+  Table.prototype.syncFixedTableRowHeight = function syncFixedTableRowHeight() {
     //this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题
     var _props9 = this.props,
         clsPrefix = _props9.clsPrefix,
@@ -1425,13 +1514,16 @@ var Table = function (_Component) {
         headerHeight = _props9.headerHeight,
         columns = _props9.columns,
         heightConsistent = _props9.heightConsistent,
-        bodyDisplayInRow = _props9.bodyDisplayInRow;
+        bodyDisplayInRow = _props9.bodyDisplayInRow,
+        lazyLoad = _props9.lazyLoad,
+        syncFixedRowHeight = _props9.syncFixedRowHeight;
 
     var headRows = this.headTable ? this.headTable.querySelectorAll('thead') : this.bodyTable.querySelectorAll('thead');
     var expandedRows = this.bodyTable.querySelectorAll('.' + clsPrefix + '-expanded-row') || [];
     var bodyRows = this.bodyTable.querySelectorAll('.' + clsPrefix + '-row') || [];
-    var leftBodyRows = this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll('.' + clsPrefix + '-row') || [];
+    var leftBodyRows = !this.dataChanged && this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll('.' + clsPrefix + '-row') || [];
-    var rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll('.' + clsPrefix + '-row') || [];
+    var rightBodyRows = !this.dataChanged && this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll('.' + clsPrefix + '-row') || [];
+    this.dataChanged = false;
     var fixedColumnsHeadRowsHeight = [].map.call(headRows, function (row) {
       var height = headerHeight;
       if (headerHeight) {
@@ -1439,25 +1531,35 @@ var Table = function (_Component) {
       }
       return headerHeight ? height : parseInt(row.getBoundingClientRect().height) || 'auto';
     });
+    var flatRecords = this.getFlatRecords(this.props.data || []);
     var fixedColumnsBodyRowsHeight = [].map.call(bodyRows, function (row, index) {
       var rsHeight = height;
       if (bodyDisplayInRow && rsHeight) {
         return rsHeight;
       } else {
+        var rowKey = row.getAttribute('data-row-key');
+        var record = flatRecords.find(function (record) {
+          return record.key === rowKey;
+        }) || {};
+        var leafKey = 'isleaf' in record ? 'isleaf' : '_isLeaf' in record ? '_isLeaf' : null; // ncc传递这俩属性区分是否是子节点
+        var isLeaf = leafKey && record[leafKey] === true;
+        if (isLeaf) {
+          return Number(Number(row.getBoundingClientRect().height).toFixed(2)) || 'auto';
+        }
         // 为了提高性能，默认获取主表的高度，但是有的场景中固定列的高度比主表的高度高，所以提供此属性，会统计所有列的高度取最大的，设置
         // 内容折行显示，并又设置了 height 的情况下，也要获取主表高度
-        if (heightConsistent || !bodyDisplayInRow && rsHeight) {
+        if (heightConsistent || !bodyDisplayInRow && rsHeight && syncFixedRowHeight) {
           var leftHeight = void 0,
               rightHeight = void 0,
               currentHeight = void 0,
               maxHeight = void 0;
-          leftHeight = leftBodyRows[index] ? parseInt(leftBodyRows[index].getBoundingClientRect().height) : 0;
+          leftHeight = leftBodyRows[index] ? Number(leftBodyRows[index].getBoundingClientRect().height).toFixed(2) : 0; // 有些浏览器中，取到的高度是小数，直接parseInt有问题，保留两位小数处理
-          rightHeight = rightBodyRows[index] ? parseInt(rightBodyRows[index].getBoundingClientRect().height) : 0;
+          rightHeight = rightBodyRows[index] ? Number(rightBodyRows[index].getBoundingClientRect().height).toFixed(2) : 0;
-          currentHeight = parseInt(row.getBoundingClientRect().height);
+          currentHeight = Number(row.getBoundingClientRect().height).toFixed(2);
           maxHeight = Math.max(leftHeight, rightHeight, currentHeight);
           return maxHeight || 'auto';
         } else {
-          return parseInt(row.getBoundingClientRect().height) || 'auto';
+          return Number(Number(row.getBoundingClientRect().height).toFixed(2)) || 'auto';
         }
       }
     });
@@ -1465,17 +1567,16 @@ var Table = function (_Component) {
     // expandedRows为NodeList  Array.prototype.forEach ie 下报错 对象不支持 “forEach” 方法
     expandedRows.length > 0 && Array.prototype.forEach.call(expandedRows, function (row) {
       var parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key");
-      var exHeight = height;
+      var exHeight = row && parseInt(row.getBoundingClientRect().height) || 'auto';
-      if (!exHeight) {
+      // fix: ie 展开表格计算渲染bug
-        exHeight = row && parseInt(row.getBoundingClientRect().height) || 'auto';
+      // try {//子表数据减少时，动态计算高度
-        try {
+      //   let td = row.querySelector('td');
-          //子表数据减少时，动态计算高度
+      //   let tdPadding = this.getTdPadding(td);
-          var td = row.querySelector('td');
+      //   let trueheight = parseInt(row.querySelectorAll('.u-table')[0].getBoundingClientRect().height);
-          var tdPadding = _this5.getTdPadding(td);
+      //   exHeight = trueheight+tdPadding;
-          var trueheight = parseInt(row.querySelectorAll('.u-table')[0].getBoundingClientRect().height);
+      // } catch (error) {
-          exHeight = trueheight + tdPadding;
+
-        } catch (error) {}
+      // }
-      }
       fixedColumnsExpandedRowsHeight[parentRowKey] = parseInt(exHeight);
     });
     if ((0, _shallowequal2["default"])(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsExpandedRowsHeight, fixedColumnsExpandedRowsHeight)) {
@@ -1499,10 +1600,10 @@ var Table = function (_Component) {
   };
 
   Table.prototype.findExpandedRow = function findExpandedRow(record, index) {
-    var _this6 = this;
+    var _this5 = this;
 
     var rows = this.getExpandedRows().filter(function (i) {
-      return i === _this6.getRowKey(record, index);
+      return i === _this5.getRowKey(record, index);
     });
     return rows[0];
   };
@@ -1646,7 +1747,7 @@ var Table = function (_Component) {
   };
 
   Table.prototype.render = function render() {
-    var _this7 = this;
+    var _this6 = this;
 
     var _state3 = this.state,
         currentHoverRecord = _state3.currentHoverRecord,
@@ -1700,7 +1801,7 @@ var Table = function (_Component) {
     return _react2["default"].createElement(
       'div',
       { className: className, style: props.style, ref: function ref(el) {
-          return _this7.contentTable = el;
+          return _this6.contentTable = el;
         },
         tabIndex: props.focusable && (props.tabIndex ? props.tabIndex : '0') },
       this.getTitle(),
@@ -1732,7 +1833,7 @@ var Table = function (_Component) {
         'div',
         { className: 'u-row-hover',
           onMouseEnter: this.onRowHoverMouseEnter, onMouseLeave: this.onRowHoverMouseLeave, ref: function ref(el) {
-            return _this7.hoverDom = el;
+            return _this6.hoverDom = el;
           } },
         props.hoverContent(currentHoverRecord, currentHoverIndex)
       )

build/TableCell.js

@@ -356,70 +356,74 @@ var TableCell = function (_Component) {
     var colSpan = void 0;
     var rowSpan = void 0,
         title = void 0;
-
-    if (render && !showSum) {
-      text = render(text, record, index, _extends({
-        dataIndex: dataIndex, render: render, fieldType: fieldType, linkConfig: linkConfig, fontColor: fontColor, bgColor: bgColor }, other));
-      if (this.isInvalidRenderCellText(text)) {
-        tdProps = text.props || {};
-        rowSpan = tdProps.rowSpan > lazyEndIndex && lazyEndIndex > 5 ? lazyEndIndex - index : tdProps.rowSpan;
-        colSpan = tdProps.colSpan;
-        text = text.children;
-      }
-    }
-
     var colMenu = this.renderColumnMenu(column.cellMenu, text, record, index);
-    // 根据 fieldType 来渲染数据
+    // 如果是固定列在主表格上就渲染null
-    if (!render) {
+    if (column.fixed && !fixed) {
-      switch (column.fieldType) {
+      text = null;
-        case 'link':
+    } else {
-          {
+      if (render && !showSum) {
-            text = this.renderLinkType(text, record, index, column.linkConfig);
+        text = render(text, record, index, _extends({
-            break;
+          dataIndex: dataIndex, render: render, fieldType: fieldType, linkConfig: linkConfig, fontColor: fontColor, bgColor: bgColor }, other));
-          }
+        if (this.isInvalidRenderCellText(text)) {
-        case 'bool':
+          tdProps = text.props || {};
-          {
+          rowSpan = tdProps.rowSpan > lazyEndIndex && lazyEndIndex > 5 ? lazyEndIndex - index : tdProps.rowSpan;
-            text = this.renderBoolType(text, column.boolConfig);
+          colSpan = tdProps.colSpan;
-            break;
+          text = text.children;
-          }
+        }
-        case 'currency':
+      }
-          {
+
-            var config = {
+      // 根据 fieldType 来渲染数据
-              precision: 2, // 精度值,需要大于0
+      if (!render) {
-              thousand: true, // 是否显示千分符号
+        switch (column.fieldType) {
-              makeUp: true, // 末位是否补零
+          case 'link':
-              preSymbol: '', // 前置符号
+            {
-              nextSymbol: '' // 后置符号
+              text = this.renderLinkType(text, record, index, column.linkConfig);
-            };
+              break;
-            text = this.renderNumber(text, _extends({}, config, column.currencyConfig), column.width);
+            }
-            break;
+          case 'bool':
-          }
+            {
-        case 'number':
+              text = this.renderBoolType(text, column.boolConfig);
-          {
+              break;
-            var _config = {
+            }
-              precision: 0, // 精度值,需要大于0
+          case 'currency':
-              thousand: true, // 是否显示千分符号
+            {
-              makeUp: false, // 末位是否补零
+              var config = {
-              preSymbol: '', // 前置符号
+                precision: 2, // 精度值,需要大于0
-              nextSymbol: '' // 后置符号
+                thousand: true, // 是否显示千分符号
-            };
+                makeUp: true, // 末位是否补零
-            text = this.renderNumber(text, _extends({}, _config, column.numberConfig), column.width);
+                preSymbol: '', // 前置符号
-            break;
+                nextSymbol: '' // 后置符号
-          }
+              };
-        case 'date':
+              text = this.renderNumber(text, _extends({}, config, column.currencyConfig), column.width);
-          {
+              break;
-            text = this.renderDate(text, column.dateConfig);
+            }
-            break;
+          case 'number':
-          }
+            {
-        case 'select':
+              var _config = {
-          {
+                precision: 0, // 精度值,需要大于0
-            text = this.renderSelect(text, column.selectConfig);
+                thousand: true, // 是否显示千分符号
-            break;
+                makeUp: false, // 末位是否补零
-          }
+                preSymbol: '', // 前置符号
-        default:
+                nextSymbol: '' // 后置符号
-          {
+              };
-            break;
+              text = this.renderNumber(text, _extends({}, _config, column.numberConfig), column.width);
-          }
+              break;
+            }
+          case 'date':
+            {
+              text = this.renderDate(text, column.dateConfig);
+              break;
+            }
+          case 'select':
+            {
+              text = this.renderSelect(text, column.selectConfig);
+              break;
+            }
+          default:
+            {
+              break;
+            }
+        }
       }
     }
 

build/TableHeader.js

@@ -142,12 +142,13 @@ var TableHeader = function (_Component) {
       table.cols = tableDome.getElementsByTagName("col");
       table.ths = tableDome.getElementsByTagName("th");
       table.tr = tableDome.getElementsByTagName("tr");
+      table.tableHeaderCols = contentTable.querySelector('.u-table-scroll .u-table-header') && contentTable.querySelector('.u-table-scroll .u-table-header').getElementsByTagName("col");
       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.fixedRightHeaderTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
       table.contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
       table.fixedLeftBodyTable = contentTable.querySelectorAll('.u-table-fixed-left .u-table-body-outer');
       if (table.fixedLeftBodyTable) {
@@ -162,6 +163,10 @@ var TableHeader = function (_Component) {
       }
 
       table.innerTableBody = contentTable.querySelector('.u-table-scroll .u-table-body table');
+      table.fixedLeftHeaderTableBody = table.fixedLeftHeaderTable && table.fixedLeftHeaderTable.querySelector('table') || null;
+      table.fixedRightHeaderTableBody = table.fixedRightHeaderTable && table.fixedRightHeaderTable.querySelector('table') || null;
+      table.fixedLeftInnerTableBody = table.fixedLeftBodyTable && table.fixedLeftBodyTable.querySelector('table') || null;
+      table.fixedRightInnerTableBody = table.fixedRightBodyTable && table.fixedRightBodyTable.querySelector('table') || null;
       table.fixedLeftBodyRows = table.fixedLeftBodyTable && table.fixedLeftBodyTable.querySelectorAll('tr') || [];
       table.fixedRightBodyRows = table.fixedRightBodyTable && table.fixedRightBodyTable.querySelectorAll('tr') || [];
     }
@@ -219,8 +224,10 @@ var TableHeader = function (_Component) {
   };
 
   TableHeader.prototype.doEventList = function doEventList(trs, action) {
-    for (var index = 0; index < trs.length; index++) {
+    if (trs && HTMLCollection.prototype.isPrototypeOf(trs) && action) {
-      action(trs[index]);
+      for (var index = 0; index < trs.length; index++) {
+        action(trs[index]);
+      }
     }
   };
 
@@ -230,13 +237,18 @@ var TableHeader = function (_Component) {
 
 
   TableHeader.prototype.dragBorderEventInit = function dragBorderEventInit() {
-    var _this5 = this;
-
     if (!this.props.dragborder) return;
-    var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }];
+    this.eventListen([{ key: 'mouseup', fun: this.onTrMouseUp }], '', document.body);
-    this.doEventList(this.table.tr, function (tr) {
+    this.eventListen([{ key: 'mousemove', fun: this.onTrMouseMove }], '', document.body);
-      _this5.eventListen(events, '', tr); //表示把事件添加到th元素上
+
-    });
+    // let  events = [
+    //   {key:'mouseup', fun:this.onTrMouseUp},
+    //   {key:'mousemove', fun:this.onTrMouseMove},
+    //   // {key:'mousemove', fun:debounce(50,this.onTrMouseMove)},//函数节流后体验很差
+    // ];
+    // this.doEventList(this.table.tr,(tr)=>{
+    //   this.eventListen(events,'',tr);//表示把事件添加到th元素上
+    // })
     // this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上
   };
 
@@ -246,12 +258,12 @@ var TableHeader = function (_Component) {
 
 
   TableHeader.prototype.removeDragBorderEvent = function removeDragBorderEvent() {
-    var _this6 = this;
+    var _this5 = this;
 
     var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }];
     // this.eventListen(events,'remove',this.table.tr[0]);
     this.doEventList(this.table.tr, function (tr) {
-      _this6.eventListen(events, 'remove', _this6.table.tr);
+      _this5.eventListen(events, 'remove', _this5.table.tr);
     });
   };
 
@@ -431,7 +443,7 @@ var TableHeader = function (_Component) {
 
 
   TableHeader.prototype.render = function render() {
-    var _this7 = this;
+    var _this6 = this;
 
     var _props2 = this.props,
         clsPrefix = _props2.clsPrefix,
@@ -449,7 +461,7 @@ var TableHeader = function (_Component) {
     return _react2["default"].createElement(
       "thead",
       _extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll", ref: function ref(_thead) {
-          return _this7._thead = _thead;
+          return _this6._thead = _thead;
         } }),
       rows.map(function (row, index) {
         var _rowLeng = row.length - 1;
@@ -495,7 +507,7 @@ var TableHeader = function (_Component) {
 
             // }
             if (filterable && index == rows.length - 1) {
-              da.children = _this7.filterRenderType(da["filtertype"], da.dataindex, columIndex);
+              da.children = _this6.filterRenderType(da["filtertype"], da.dataindex, columIndex);
               if (da.key === undefined) {
                 keyTemp.key = keyTemp.key + '-filterable';
               }
@@ -516,7 +528,7 @@ var TableHeader = function (_Component) {
                 "th",
                 _extends({}, da, keyTemp, { className: thClassName, "data-th-fixed": da.fixed, "data-line-key": da.key,
                   "data-line-index": columIndex, "data-th-width": da.width, "data-type": "draggable", onCopy: function onCopy(event) {
-                    _this7.onCopy(da, columIndex, event);
+                    _this6.onCopy(da, columIndex, event);
                   } }),
                 da.children,
 
@@ -524,10 +536,10 @@ var TableHeader = function (_Component) {
                 dragborder && lastObj && da.key != lastObj.key ? _react2["default"].createElement(
                   "div",
                   { ref: function ref(el) {
-                      return _this7.gap = el;
+                      return _this6.gap = el;
                     }, "data-line-key": da.key,
                     "data-line-index": columIndex, "data-th-width": da.width,
-                    "data-type": "online", className: clsPrefix + "-thead-th-drag-gap" },
+                    "data-type": "online", "data-th-fixed": da.fixed, className: clsPrefix + "-thead-th-drag-gap" },
                   _react2["default"].createElement("div", { className: "online" })
                 ) : ""
               );
@@ -538,7 +550,22 @@ var TableHeader = function (_Component) {
               da.onClick ? thDefaultObj.onClick = function (e) {
                 da.onClick(da, e);
               } : "";
-              return _react2["default"].createElement("th", _extends({}, thDefaultObj, keyTemp, { "data-th-fixed": da.fixed, style: { maxWidth: da.width }, onCopy: _this7.onCopy }));
+              return _react2["default"].createElement(
+                "th",
+                _extends({}, thDefaultObj, keyTemp, { "data-th-fixed": da.fixed, style: { maxWidth: da.width }, onCopy: _this6.onCopy }),
+                da.children,
+
+                // && columIndex != _rowLeng
+                dragborder ? _react2["default"].createElement(
+                  "div",
+                  { ref: function ref(el) {
+                      return _this6.gap = el;
+                    }, "data-line-key": da.key,
+                    "data-line-index": columIndex, "data-th-width": da.width,
+                    "data-type": "online", "data-th-fixed": da.fixed, className: clsPrefix + "-thead-th-drag-gap" },
+                  _react2["default"].createElement("div", { className: "online" })
+                ) : ""
+              );
             }
           })
         );
@@ -554,7 +581,7 @@ TableHeader.defaultProps = {
 };
 
 var _initialiseProps = function _initialiseProps() {
-  var _this8 = this;
+  var _this7 = this;
 
   this.getOnLineObject = function (_element) {
     var type = _element.getAttribute('data-type'),
@@ -571,28 +598,29 @@ var _initialiseProps = function _initialiseProps() {
   };
 
   this.onTrMouseDown = function (e) {
-    var eventNoStop = _this8.props.eventNoStop;
+    var eventNoStop = _this7.props.eventNoStop;
 
     !eventNoStop && _utils.Event.stopPropagation(e);
     var event = _utils.Event.getEvent(e),
         targetEvent = _utils.Event.getTarget(event);
-    var _props3 = _this8.props,
+    var _props3 = _this7.props,
         clsPrefix = _props3.clsPrefix,
         contentTable = _props3.contentTable,
         lastShowIndex = _props3.lastShowIndex,
         columnsChildrenList = _props3.columnsChildrenList;
     // let currentElement = this.getOnLineObject(targetEvent);
 
-    var currentElement = _this8.getTargetToType(targetEvent);
+    var currentElement = _this7.getTargetToType(targetEvent);
     if (!currentElement) return;
     var type = currentElement.getAttribute('data-type');
-    if (!_this8.props.dragborder && !_this8.props.draggable) return;
+    var fixedType = currentElement.getAttribute('data-th-fixed');
-    if (type == 'online' && _this8.props.dragborder) {
+    if (!_this7.props.dragborder && !_this7.props.draggable) return;
+    if (type == 'online' && _this7.props.dragborder) {
       // if(!this.props.dragborder)return;
       targetEvent.setAttribute('draggable', false); //添加交换列效果
       var currentIndex = -1;
       var defaultWidth = currentElement.getAttribute("data-th-width");
-      _this8.drag.option = "border"; //拖拽操作
+      _this7.drag.option = "border"; //拖拽操作
       if (columnsChildrenList) {
         var columnKey = currentElement.getAttribute("data-line-key");
         if (columnKey) {
@@ -605,27 +633,44 @@ var _initialiseProps = function _initialiseProps() {
         console.log('Key must be set for column!');
         return;
       }
-      var currentObj = _this8.table.cols[currentIndex];
+      var currentObj = _this7.table.cols[currentIndex];
-      _this8.drag.currIndex = currentIndex;
+      _this7.drag.currIndex = currentIndex;
-      _this8.drag.oldLeft = event.clientX;
+      _this7.drag.oldLeft = event.clientX;
-      _this8.drag.oldWidth = parseInt(currentObj.style.width);
+      _this7.drag.oldWidth = parseInt(currentObj.style.width);
-      _this8.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth;
+      _this7.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth;
-      _this8.drag.tableWidth = parseInt(_this8.table.table.style.width ? _this8.table.table.style.width : _this8.table.table.scrollWidth);
+      _this7.drag.tableWidth = parseInt(_this7.table.table.style.width ? _this7.table.table.style.width : _this7.table.table.scrollWidth);
-      if (!_this8.tableOldWidth) {
+      if (!_this7.tableOldWidth) {
-        _this8.tableOldWidth = _this8.drag.tableWidth; //this.getTableWidth();
+        _this7.tableOldWidth = _this7.drag.tableWidth; //this.getTableWidth();
       }
-      if (!_this8.lastColumWidth) {
+
-        _this8.lastColumWidth = parseInt(_this8.table.cols[lastShowIndex].style.width);
+      // if(!this.lastColumWidth){
+      var contentT = _this7.table.tableHeaderCols || _this7.table.cols;
+      _this7.lastColumWidth = parseInt(contentT[lastShowIndex].style.width);
+      // console.log('begin--lastColumnWidth',this.lastColumWidth);
+      // }
+      _this7.drag.contentTableCWidth = _this7.table.contentTableHeader.clientWidth;
+      _this7.drag.contentTableSWidth = _this7.table.contentTableHeader.scrollWidth;
+      if (fixedType) {
+        var contentTablePar = _this7.table.contentTableHeader.parentNode;
+
+        if (contentTablePar) {
+          var originL = parseInt(contentTablePar.style.marginLeft);
+          var originR = parseInt(contentTablePar.style.marginRight);
+          // 内容区表格marginLef
+          _this7.drag.contentTableML = originL;
+          _this7.drag.contentTableMR = originR;
+        }
       }
-    } else if (type != 'online' && _this8.props.draggable) {
+      _this7.drag.fixedType = fixedType;
+    } else if (type != 'online' && _this7.props.draggable) {
       // if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
-      if (!_this8.props.draggable) return;
+      if (!_this7.props.draggable) return;
-      var th = _this8.getTargetToType(targetEvent);
+      var th = _this7.getTargetToType(targetEvent);
       th.setAttribute('draggable', true); //添加交换列效果
-      _this8.drag.option = 'dragAble';
+      _this7.drag.option = 'dragAble';
-      _this8.currentDome = th;
+      _this7.currentDome = th;
       var _currentIndex = parseInt(th.getAttribute("data-line-index"));
-      _this8.drag.currIndex = _currentIndex;
+      _this7.drag.currIndex = _currentIndex;
     } else {
       // console.log("onTrMouseDown dragborder or draggable is all false !");
       return;
@@ -635,8 +680,8 @@ var _initialiseProps = function _initialiseProps() {
   this.getTableWidth = function () {
     var tableWidth = 0,
         offWidth = 0; //this.table.cols.length;
-    for (var index = 0; index < _this8.table.cols.length; index++) {
+    for (var index = 0; index < _this7.table.cols.length; index++) {
-      var da = _this8.table.cols[index];
+      var da = _this7.table.cols[index];
       tableWidth += parseInt(da.style.width);
     }
     return tableWidth - offWidth;
@@ -645,7 +690,7 @@ var _initialiseProps = function _initialiseProps() {
   this.getTargetToType = function (targetEvent) {
     var tag = targetEvent;
     if (targetEvent && !targetEvent.getAttribute("data-type")) {
-      tag = _this8.getTargetToType(targetEvent.parentElement);
+      tag = _this7.getTargetToType(targetEvent.parentElement);
     }
     return tag;
   };
@@ -653,15 +698,15 @@ var _initialiseProps = function _initialiseProps() {
   this.getTargetToTh = function (targetEvent) {
     var th = targetEvent;
     if (targetEvent.nodeName.toUpperCase() != "TH") {
-      th = _this8.getThDome(targetEvent);
+      th = _this7.getThDome(targetEvent);
     }
     // console.log(" getTargetToTh: ", th);
     return th;
   };
 
   this.onTrMouseMove = function (e) {
-    if (!_this8.props.dragborder && !_this8.props.draggable) return;
+    if (!_this7.props.dragborder && !_this7.props.draggable) return;
-    var _props4 = _this8.props,
+    var _props4 = _this7.props,
         clsPrefix = _props4.clsPrefix,
         dragborder = _props4.dragborder,
         contentDomWidth = _props4.contentDomWidth,
@@ -677,20 +722,20 @@ var _initialiseProps = function _initialiseProps() {
 
     !eventNoStop && _utils.Event.stopPropagation(e);
     var event = _utils.Event.getEvent(e);
-    if (_this8.props.dragborder && _this8.drag.option == "border") {
+    if (_this7.props.dragborder && _this7.drag.option == "border") {
       //移动改变宽度
-      var currentCols = _this8.table.cols[_this8.drag.currIndex];
+      var currentCols = _this7.table.cols[_this7.drag.currIndex];
-      var diff = event.clientX - _this8.drag.oldLeft;
+      var diff = event.clientX - _this7.drag.oldLeft;
-      var newWidth = _this8.drag.oldWidth + diff;
+      var newWidth = _this7.drag.oldWidth + diff;
-      _this8.drag.newWidth = newWidth > 0 ? newWidth : _this8.minWidth;
+      _this7.drag.newWidth = newWidth > 0 ? newWidth : _this7.minWidth;
-      if (newWidth > _this8.minWidth) {
+      if (newWidth > _this7.minWidth) {
         currentCols.style.width = newWidth + 'px';
 
         // displayinrow 判断、 固定行高判断 
         if (!bodyDisplayInRow) {
-          _this8.table.bodyRows.forEach(function (row, index) {
+          _this7.table.bodyRows.forEach(function (row, index) {
-            var leftRow = _this8.table.fixedLeftBodyRows[index];
+            var leftRow = _this7.table.fixedLeftBodyRows[index];
-            var rightRow = _this8.table.fixedRightBodyRows[index];
+            var rightRow = _this7.table.fixedRightBodyRows[index];
             if (leftRow || rightRow) {
               var height = row.getBoundingClientRect().height;
               leftRow && (leftRow.style.height = height + "px");
@@ -700,74 +745,145 @@ var _initialiseProps = function _initialiseProps() {
         }
 
         //hao 支持固定表头拖拽 修改表体的width
-        if (_this8.fixedTable.cols) {
+        if (_this7.fixedTable.cols) {
-          _this8.fixedTable.cols[_this8.drag.currIndex].style.width = newWidth + "px";
+          _this7.fixedTable.cols[_this7.drag.currIndex].style.width = newWidth + "px";
         }
 
-        var newDiff = parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width);
+        var contentTableSWidth = _this7.drag.contentTableSWidth - _this7.drag.contentTableCWidth;
-        if (newDiff > 0) {
+        // console.log('contentTableSWidth+diff',contentTableSWidth+diff,'diff',diff);
-          //缩小
+        if (diff < 0 && contentTableSWidth + diff < 0) {
-          var lastWidth = _this8.lastColumWidth + newDiff;
+          var headerCols = _this7.table.tableHeaderCols || _this7.table.cols;
-          _this8.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头
+          var lastWidth = _this7.lastColumWidth - (contentTableSWidth + diff);
-          _this8.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体
+          // console.log('lastWidth',lastWidth,'lastShowIndex',lastShowIndex);
+          headerCols[lastShowIndex].style.width = lastWidth + "px"; //同步表头
+          _this7.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体
         }
-        var showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (_this8.drag.tableWidth + diff) - scrollbarWidth;
+        // 内容区非固定列场景拖拽
-        //表头滚动条处理
+        if (!_this7.drag.fixedType) {
-        if (headerScroll) {
+
-          if (showScroll < 0) {
+          // let newDiff = (parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width));
-            //小于 0 出现滚动条
+          // if(newDiff > 0){//缩小
-            //找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
+          //   let lastWidth = this.lastColumWidth + newDiff;
-            _this8.table.contentTableHeader.style.overflowX = 'scroll';
+          //   this.table.cols[lastShowIndex].style.width = lastWidth +"px";//同步表头
-            _this8.optTableMargin(_this8.table.fixedLeftHeaderTable, scrollbarWidth);
+          //   this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px";//同步表体
-            _this8.optTableMargin(_this8.table.fixedRighHeadertTable, scrollbarWidth);
+
+          // }
+
+          var showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (_this7.drag.tableWidth + diff) - scrollbarWidth;
+
+          //表头滚动条处理
+          if (headerScroll) {
+            if (showScroll < 0) {
+              //小于 0 出现滚动条
+              //找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
+              _this7.table.contentTableHeader.style.overflowX = 'scroll';
+              _this7.optTableMargin(_this7.table.fixedLeftHeaderTable, scrollbarWidth);
+              _this7.optTableMargin(_this7.table.fixedRightHeaderTable, scrollbarWidth);
+            } else {
+              //大于 0 不显示滚动条
+              _this7.table.contentTableHeader.style.overflowX = 'hidden';
+              _this7.optTableMargin(_this7.table.fixedLeftHeaderTable, 0);
+              _this7.optTableMargin(_this7.table.fixedRightHeaderTable, 0);
+            }
           } else {
-            //大于 0 不显示滚动条
+            var scrollContainers = _this7.table.tableBody.querySelectorAll('.scroll-container') || [];
-            _this8.table.contentTableHeader.style.overflowX = 'hidden';
+            if (showScroll < 0) {
-            _this8.optTableMargin(_this8.table.fixedLeftHeaderTable, 0);
+              scrollContainers[0] ? scrollContainers[0].style.overflowX = 'auto' : null;
-            _this8.optTableMargin(_this8.table.fixedRighHeadertTable, 0);
+              _this7.optTableMargin(_this7.table.fixedLeftBodyTable, '-' + scrollbarWidth);
+              _this7.optTableMargin(_this7.table.fixedRightBodyTable, '-' + scrollbarWidth);
+              _this7.optTableScroll(_this7.table.fixedLeftBodyTable, { x: 'scroll' });
+              _this7.optTableScroll(_this7.table.fixedRightBodyTable, { x: 'scroll' });
+            } else {
+              scrollContainers[0] ? scrollContainers[0].style.overflowX = 'hidden' : null;
+              _this7.optTableMargin(_this7.table.fixedLeftBodyTable, 0);
+              _this7.optTableMargin(_this7.table.fixedRightBodyTable, 0);
+              _this7.optTableScroll(_this7.table.fixedLeftBodyTable, { x: 'auto' });
+              _this7.optTableScroll(_this7.table.fixedRightBodyTable, { x: 'auto' });
+            }
           }
-        } else {
+        } else if (_this7.drag.fixedType) {
-          if (showScroll < 0) {
+          if (_this7.table.ths[_this7.drag.currIndex]) {
-            _this8.table.tableBody.style.overflowX = 'auto';
+            _this7.table.ths[_this7.drag.currIndex].width = newWidth;
-            _this8.optTableMargin(_this8.table.fixedLeftBodyTable, '-' + scrollbarWidth);
+          }
-            _this8.optTableMargin(_this8.table.fixedRightBodyTable, '-' + scrollbarWidth);
+          // console.log('this.drag.contentTableML',this.drag.contentTableML,'diff',diff);
-            _this8.optTableScroll(_this8.table.fixedLeftBodyTable, { x: 'scroll' });
+          // debugger
-            _this8.optTableScroll(_this8.table.fixedRightBodyTable, { x: 'scroll' });
+          _this7.syncFixedBodyTableWidth(); // 同步body中table的宽度
+          var contentTablePar = _this7.table.contentTableHeader.parentNode;
+          // left、right缩小的内容，在没有滚动条时，需要将宽度同步到到最后一列
+          // diff<0 往里拖，
+          // const  contentTableSWidth = this.drag.contentTableSWidth - this.drag.contentTableCWidth;
+          // console.log('contentTableSWidth+diff',contentTableSWidth+diff,'diff',diff);
+          // if(diff<0 && contentTableSWidth+diff < 0) {
+          //   const headerCols = this.table.tableHeaderCols || this.table.cols;
+          //   const lastWidth =this.lastColumWidth - (contentTableSWidth+diff);
+          //   console.log('lastWidth',lastWidth,'lastShowIndex',lastShowIndex);
+          //   headerCols[lastShowIndex].style.width = lastWidth +"px";//同步表头
+          //   this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px";//同步表体
+          // }
+          if (_this7.drag.fixedType == 'left') {
+            contentTablePar.style.marginLeft = _this7.drag.contentTableML + diff + 'px';
           } else {
-            _this8.table.tableBody.style.overflowX = 'hidden';
+            contentTablePar.style.marginRight = _this7.drag.contentTableMR + diff + 'px';
-            _this8.optTableMargin(_this8.table.fixedLeftBodyTable, 0);
+          }
-            _this8.optTableMargin(_this8.table.fixedRightBodyTable, 0);
+          var containerWidth = contentTablePar.getBoundingClientRect().width;
-            _this8.optTableScroll(_this8.table.fixedLeftBodyTable, { x: 'auto' });
+          var tableWidth = _this7.table.innerTableBody.getBoundingClientRect().width;
-            _this8.optTableScroll(_this8.table.fixedRightBodyTable, { x: 'auto' });
+          var _scrollContainers = _this7.table.tableBody.querySelectorAll('.scroll-container') || [];
+          if (tableWidth > containerWidth) {
+            _scrollContainers[0] ? _scrollContainers[0].style.overflowX = 'auto' : null;
+            _this7.optTableMargin(_this7.table.fixedLeftBodyTable, '-' + scrollbarWidth);
+            _this7.optTableMargin(_this7.table.fixedRightBodyTable, '-' + scrollbarWidth);
+            _this7.optTableScroll(_this7.table.fixedLeftBodyTable, { x: 'scroll' });
+            _this7.optTableScroll(_this7.table.fixedRightBodyTable, { x: 'scroll' });
+          } else {
+            _scrollContainers[0] ? _scrollContainers[0].style.overflowX = 'hidden' : null;
+            _this7.optTableMargin(_this7.table.fixedLeftBodyTable, 0);
+            _this7.optTableMargin(_this7.table.fixedRightBodyTable, 0);
+            _this7.optTableScroll(_this7.table.fixedLeftBodyTable, { x: 'auto' });
+            _this7.optTableScroll(_this7.table.fixedRightBodyTable, { x: 'auto' });
           }
         }
       } else {
-        _this8.drag.newWidth = _this8.minWidth;
+        _this7.drag.newWidth = _this7.minWidth;
       }
     }
     // 增加拖拽列宽动作的回调函数
-    _this8.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this8.drag.newWidth);
+    _this7.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this7.drag.newWidth);
+  };
+
+  this.syncFixedBodyTableWidth = function () {
+    var _table = _this7.table,
+        fixedLeftHeaderTableBody = _table.fixedLeftHeaderTableBody,
+        fixedLeftInnerTableBody = _table.fixedLeftInnerTableBody,
+        fixedRightHeaderTableBody = _table.fixedRightHeaderTableBody,
+        fixedRightInnerTableBody = _table.fixedRightInnerTableBody;
+
+    if (fixedLeftHeaderTableBody && fixedLeftInnerTableBody) {
+      fixedLeftInnerTableBody.style.width = fixedLeftHeaderTableBody.getBoundingClientRect().width + 'px';
+    }
+    if (fixedRightHeaderTableBody && fixedRightInnerTableBody) {
+      fixedRightInnerTableBody.style.width = fixedRightHeaderTableBody.getBoundingClientRect().width + 'px';
+    }
   };
 
   this.onTrMouseUp = function (e) {
     var event = _utils.Event.getEvent(e);
-    var width = _this8.drag.newWidth;
+    var width = _this7.drag.newWidth;
-    var opt = _this8.drag.option;
+    var opt = _this7.drag.option;
-    _this8.mouseClear();
+    _this7.mouseClear();
     if (opt !== "border") return; // fix:点击表头会触发onDropBorder事件的问题
-    _this8.props.onDropBorder && _this8.props.onDropBorder(event, width);
+    _this7.props.onDropBorder && _this7.props.onDropBorder(event, width);
   };
 
   this.clearThsDr = function () {
-    var ths = _this8.table.ths;
+    var ths = _this7.table.ths;
     for (var index = 0; index < ths.length; index++) {
       ths[index].setAttribute('draggable', false); //去掉交换列效果
     }
   };
 
   this.bodyonLineMouseUp = function (events, type) {
-    if (!_this8.drag || !_this8.drag.option) return;
+    if (!_this7.drag || !_this7.drag.option) return;
-    _this8.mouseClear();
+    _this7.mouseClear();
   };
 
   this.optTableMargin = function (table, scrollbarWidth) {
@@ -783,38 +899,44 @@ var _initialiseProps = function _initialiseProps() {
       var innerTable = table.querySelector('.u-table-body-inner');
       if (innerTable) {
         //fixbug: 拖拽列宽后，滚动条滚到表格底部，会导致固定列和非固定列错行
-        overflow.x && (innerTable.style.overflowX = overflow.x);
+        if (overflow.x) {
+          var fixedScrollContainers = innerTable.querySelectorAll('.fixed-scroll-container');
+          if (fixedScrollContainers && fixedScrollContainers.length) {
+            fixedScrollContainers[0] && (fixedScrollContainers[0].style.overflowX = overflow.x);
+            fixedScrollContainers[1] && (fixedScrollContainers[1].style.overflowX = overflow.x);
+          }
+        }
         overflow.y && (innerTable.style.overflowY = overflow.y);
       }
     }
   };
 
   this.onDragStart = function (e) {
-    if (!_this8.props.draggable) return;
+    if (!_this7.props.draggable) return;
-    if (_this8.drag && _this8.drag.option != 'dragAble') {
+    if (_this7.drag && _this7.drag.option != 'dragAble') {
       return;
     }
     var event = _utils.Event.getEvent(e),
 
     // target = Event.getTarget(event);
-    target = _this8.getTargetToTh(_utils.Event.getTarget(event));
+    target = _this7.getTargetToTh(_utils.Event.getTarget(event));
     var currentIndex = parseInt(target.getAttribute("data-line-index"));
     var currentKey = target.getAttribute('data-line-key');
 
     if (event.dataTransfer.setDragImage) {
       var crt = target.cloneNode(true);
       crt.style.backgroundColor = "#ebecf0";
-      crt.style.width = _this8.table.cols[currentIndex].style.width; //拖动后再交换列的时候，阴影效果可同步
+      crt.style.width = _this7.table.cols[currentIndex].style.width; //拖动后再交换列的时候，阴影效果可同步
       crt.style.height = "40px";
       // crt.style['line-height'] = "40px";
       // document.body.appendChild(crt);
-      document.getElementById(_this8._table_none_cont_id).appendChild(crt);
+      document.getElementById(_this7._table_none_cont_id).appendChild(crt);
       event.dataTransfer.setDragImage(crt, 0, 0);
     }
 
     event.dataTransfer.effectAllowed = "move";
     event.dataTransfer.setData("Text", currentKey);
-    _this8.currentObj = _this8.props.rows[0][currentIndex];
+    _this7.currentObj = _this7.props.rows[0][currentIndex];
   };
 
   this.onDragOver = function (e) {
@@ -823,34 +945,34 @@ var _initialiseProps = function _initialiseProps() {
   };
 
   this.onDrop = function (e) {
-    if (!_this8.props.draggable) return;
+    if (!_this7.props.draggable) return;
-    var props = _this8.getCurrentEventData(_this8._dragCurrent);
+    var props = _this7.getCurrentEventData(_this7._dragCurrent);
     e.column = { props: props };
-    if (_this8.drag && _this8.drag.option != 'dragAble') {
+    if (_this7.drag && _this7.drag.option != 'dragAble') {
-      _this8.props.onDrop(e);
+      _this7.props.onDrop(e);
       return;
     }
     var event = _utils.Event.getEvent(e),
         target = _utils.Event.getTarget(event);
     event.preventDefault();
     event.stopPropagation();
-    _this8.currentDome.setAttribute('draggable', false); //添加交换列效果
+    _this7.currentDome.setAttribute('draggable', false); //添加交换列效果
     // let data = this.getCurrentEventData(this._dragCurrent);
     // if(!data){
     //   this.props.onDrop(e);
     //   return;
     // }
-    if (!_this8.props.onDrop) return;
+    if (!_this7.props.onDrop) return;
     // this.props.onDrop(event,target);
-    _this8.props.onDrop(event, { dragSource: _this8.currentObj, dragTarg: e.column });
+    _this7.props.onDrop(event, { dragSource: _this7.currentObj, dragTarg: e.column });
   };
 
   this.onDragEnter = function (e) {
     var event = _utils.Event.getEvent(e),
         target = _utils.Event.getTarget(event);
-    _this8._dragCurrent = target;
+    _this7._dragCurrent = target;
     var currentIndex = target.getAttribute("data-line-index");
-    if (!currentIndex || parseInt(currentIndex) === _this8.drag.currIndex) return;
+    if (!currentIndex || parseInt(currentIndex) === _this7.drag.currIndex) return;
     if (target.nodeName.toUpperCase() === "TH") {
       // target.style.border = "2px dashed rgba(5,0,0,0.25)";
       target.setAttribute("style", "border-right:2px dashed rgb(30, 136, 229)");
@@ -861,24 +983,24 @@ var _initialiseProps = function _initialiseProps() {
   this.onDragEnd = function (e) {
     var event = _utils.Event.getEvent(e),
         target = _utils.Event.getTarget(event);
-    _this8._dragCurrent.setAttribute("style", "");
+    _this7._dragCurrent.setAttribute("style", "");
     event.preventDefault();
     event.stopPropagation();
     // this._dragCurrent.style = "";
-    document.getElementById(_this8._table_none_cont_id).innerHTML = "";
+    document.getElementById(_this7._table_none_cont_id).innerHTML = "";
 
-    var data = _this8.getCurrentEventData(_this8._dragCurrent);
+    var data = _this7.getCurrentEventData(_this7._dragCurrent);
     if (!data) return;
-    if (!_this8.currentObj || _this8.currentObj.key == data.key) return;
+    if (!_this7.currentObj || _this7.currentObj.key == data.key) return;
-    if (!_this8.props.onDragEnd) return;
+    if (!_this7.props.onDragEnd) return;
-    _this8.props.onDragEnd(event, { dragSource: _this8.currentObj, dragTarg: data });
+    _this7.props.onDragEnd(event, { dragSource: _this7.currentObj, dragTarg: data });
   };
 
   this.onDragLeave = function (e) {
     var event = _utils.Event.getEvent(e),
         target = _utils.Event.getTarget(event);
     var currentIndex = target.getAttribute("data-line-index");
-    if (!currentIndex || parseInt(currentIndex) === _this8.drag.currIndex) return;
+    if (!currentIndex || parseInt(currentIndex) === _this7.drag.currIndex) return;
     if (target.nodeName.toUpperCase() === "TH") {
       target.setAttribute("style", "");
       // this._dragCurrent.style = "";
@@ -886,7 +1008,7 @@ var _initialiseProps = function _initialiseProps() {
   };
 
   this.handlerFilterChange = function (key, value, condition) {
-    var onFilterChange = _this8.props.onFilterChange;
+    var onFilterChange = _this7.props.onFilterChange;
 
     if (onFilterChange) {
       onFilterChange(key, value, condition);
@@ -894,7 +1016,7 @@ var _initialiseProps = function _initialiseProps() {
   };
 
   this.handlerFilterClear = function (field) {
-    var onFilterClear = _this8.props.onFilterClear;
+    var onFilterClear = _this7.props.onFilterClear;
 
     if (onFilterClear) {
       onFilterClear(field);
@@ -902,7 +1024,7 @@ var _initialiseProps = function _initialiseProps() {
   };
 
   this.filterRenderType = function (type, dataIndex, index) {
-    var _props5 = _this8.props,
+    var _props5 = _this7.props,
         clsPrefix = _props5.clsPrefix,
         rows = _props5.rows,
         filterDelay = _props5.filterDelay,
@@ -917,8 +1039,8 @@ var _initialiseProps = function _initialiseProps() {
           , clsPrefix: clsPrefix //css前缀
           , className: clsPrefix + " filter-text",
           dataIndex: dataIndex //字段
-          , onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this8.handlerFilterChange) //输入框回调
+          , onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this7.handlerFilterChange) //输入框回调
-          , onFilterClear: _this8.handlerFilterClear //清除回调
+          , onFilterClear: _this7.handlerFilterClear //清除回调
           , filterDropdown: rows[1][index]["filterdropdown"] //是否显示下拉条件
           , filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
           , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@@ -931,8 +1053,8 @@ var _initialiseProps = function _initialiseProps() {
           clsPrefix: clsPrefix,
           className: clsPrefix + " filter-text",
           dataIndex: dataIndex //字段
-          , onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this8.handlerFilterChange) //输入框回调并且函数防抖动
+          , onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this7.handlerFilterChange) //输入框回调并且函数防抖动
-          , onFilterClear: _this8.handlerFilterClear //清除回调
+          , onFilterClear: _this7.handlerFilterClear //清除回调
           , filterDropdown: rows[1][index]["filterdropdown"],
           filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
           , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@@ -966,8 +1088,8 @@ var _initialiseProps = function _initialiseProps() {
           data: selectDataSource,
           notFoundContent: "Loading" //没有数据显示的默认字
           , dataIndex: dataIndex //字段
-          , onFilterChange: _this8.handlerFilterChange //输入框回调
+          , onFilterChange: _this7.handlerFilterChange //输入框回调
-          , onFilterClear: _this8.handlerFilterClear //清除回调
+          , onFilterClear: _this7.handlerFilterClear //清除回调
           , filterDropdown: rows[1][index]["filterdropdown"],
           onFocus: rows[1][index]["filterdropdownfocus"],
           filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
@@ -982,8 +1104,8 @@ var _initialiseProps = function _initialiseProps() {
           onClick: function onClick() {},
           format: rows[1][index]["format"] || "YYYY-MM-DD",
           dataIndex: dataIndex //字段
-          , onFilterChange: _this8.handlerFilterChange //输入框回调
+          , onFilterChange: _this7.handlerFilterChange //输入框回调
-          , onFilterClear: _this8.handlerFilterClear //清除回调
+          , onFilterClear: _this7.handlerFilterClear //清除回调
           , filterDropdown: rows[1][index]["filterdropdown"],
           filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
           , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@@ -997,8 +1119,8 @@ var _initialiseProps = function _initialiseProps() {
           onClick: function onClick() {},
           format: rows[1][index]["format"] || "YYYY",
           dataIndex: dataIndex //字段
-          , onFilterChange: _this8.handlerFilterChange //输入框回调
+          , onFilterChange: _this7.handlerFilterChange //输入框回调
-          , onFilterClear: _this8.handlerFilterClear //清除回调
+          , onFilterClear: _this7.handlerFilterClear //清除回调
           , filterDropdown: rows[1][index]["filterdropdown"],
           filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
           , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@@ -1012,8 +1134,8 @@ var _initialiseProps = function _initialiseProps() {
           onClick: function onClick() {},
           format: rows[1][index]["format"] || "YYYY-MM",
           dataIndex: dataIndex //字段
-          , onFilterChange: _this8.handlerFilterChange //输入框回调
+          , onFilterChange: _this7.handlerFilterChange //输入框回调
-          , onFilterClear: _this8.handlerFilterClear //清除回调
+          , onFilterClear: _this7.handlerFilterClear //清除回调
           , filterDropdown: rows[1][index]["filterdropdown"],
           filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
           , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@@ -1027,8 +1149,8 @@ var _initialiseProps = function _initialiseProps() {
           onClick: function onClick() {},
           format: rows[1][index]["format"] || "YYYY-Wo",
           dataIndex: dataIndex //字段
-          , onFilterChange: _this8.handlerFilterChange //输入框回调
+          , onFilterChange: _this7.handlerFilterChange //输入框回调
-          , onFilterClear: _this8.handlerFilterClear //清除回调
+          , onFilterClear: _this7.handlerFilterClear //清除回调
           , filterDropdown: rows[1][index]["filterdropdown"],
           filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
           , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@@ -1042,8 +1164,8 @@ var _initialiseProps = function _initialiseProps() {
           onClick: function onClick() {},
           format: rows[1][index]["format"] || "YYYY-MM-DD",
           dataIndex: dataIndex //字段
-          , onFilterChange: _this8.handlerFilterChange //输入框回调
+          , onFilterChange: _this7.handlerFilterChange //输入框回调
-          , onFilterClear: _this8.handlerFilterClear //清除回调
+          , onFilterClear: _this7.handlerFilterClear //清除回调
           , filterDropdown: rows[1][index]["filterdropdown"],
           filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
           , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@@ -1055,8 +1177,8 @@ var _initialiseProps = function _initialiseProps() {
   };
 
   this.onCopy = function (data, index, event) {
-    if (_this8.props.onCopy) {
+    if (_this7.props.onCopy) {
-      _this8.props.onCopy(_extends(data, { col: index }), event);
+      _this7.props.onCopy(_extends(data, { col: index }), event);
     }
   };
 };

build/TableRow.js

@@ -122,6 +122,9 @@ var TableRow = function (_Component) {
         target = target.parentNode;
       }
       _this.currentIndex = target.getAttribute("data-row-key");
+
+      // 拖拽其实index
+      _this.props.contentTable.startI = target.getAttribute("data-row-index");
       _this._dragCurrent = target;
       event.dataTransfer.effectAllowed = "move";
       event.dataTransfer.setData("Text", _this.currentIndex);
@@ -134,7 +137,9 @@ var TableRow = function (_Component) {
     };
 
     _this.onDrop = function (e) {
-      var onDragRow = _this.props.onDragRow;
+      var _this$props = _this.props,
+          onDragRow = _this$props.onDragRow,
+          contentTable = _this$props.contentTable;
 
       var event = _utils.Event.getEvent(e),
           _target = _utils.Event.getTarget(event),
@@ -224,9 +229,9 @@ var TableRow = function (_Component) {
     };
 
     _this.synchronizeTableTrShadow = function () {
-      var _this$props = _this.props,
+      var _this$props2 = _this.props,
-          contentTable = _this$props.contentTable,
+          contentTable = _this$props2.contentTable,
-          index = _this$props.index;
+          index = _this$props2.index;
 
 
       var cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index],
@@ -277,21 +282,29 @@ var TableRow = function (_Component) {
           currentObj = element;
         }
       }
-      if (type) {
+      if (type == 'down') {
         currentObj && currentObj.setAttribute("style", "border-bottom:2px solid #02B1FD");
+      } else if (type) {
+        currentObj && currentObj.setAttribute("style", "border-top:2px solid #02B1FD");
       } else {
         currentObj && currentObj.setAttribute("style", "");
       }
     };
 
     _this.onDragEnter = function (e) {
+      var contentTable = _this.props.contentTable;
+
       var event = _utils.Event.getEvent(e),
           _target = _utils.Event.getTarget(event),
           target = _target.parentNode;
       var currentIndex = target.getAttribute("data-row-key");
+      var dragEnterIndex = target.getAttribute("data-row-index");
       if (!currentIndex || currentIndex === _this.currentIndex) return;
+      var dragType = parseInt(dragEnterIndex) > parseInt(contentTable.startI) ? 'down' : 'top';
+
+      contentTable.dragType = dragType;
       if (target.nodeName.toUpperCase() === "TR") {
-        _this.synchronizeTableTr(currentIndex, true);
+        _this.synchronizeTableTr(currentIndex, dragType);
       }
     };
 
@@ -332,6 +345,15 @@ var TableRow = function (_Component) {
       _this.element = el;
     };
 
+    _this.getLoadingStyle = function (isPre, isSuf) {
+      if (isPre) {
+        return _this.element && _this.element.nextSibling ? _this.element.nextSibling.getBoundingClientRect() : {};
+      }
+      if (isSuf) {
+        return _this.element && _this.element.previousSibling ? _this.element.previousSibling.getBoundingClientRect() : {};
+      }
+    };
+
     _this._timeout = null;
     _this.state = {
       hovered: false
@@ -570,6 +592,9 @@ var TableRow = function (_Component) {
         visible = _props10.visible,
         index = _props10.index,
         onPaste = _props10.onPaste,
+        isPre = _props10.isPre,
+        isSuf = _props10.isSuf,
+        containerWidth = _props10.containerWidth,
         expandIconColumnIndex = _props10.expandIconColumnIndex,
         expandIconAsCell = _props10.expandIconAsCell,
         expanded = _props10.expanded,
@@ -592,6 +617,7 @@ var TableRow = function (_Component) {
         getCellClassName = _props10.getCellClassName;
     var notRowDrag = this.state.notRowDrag;
 
+    var isEmptyTr = isPre || isSuf;
     var showSum = false;
     var className = this.props.className;
 
@@ -667,7 +693,7 @@ var TableRow = function (_Component) {
     if (rowDraggAble && !useDragHandle && !notRowDrag) {
       className += ' row-dragg-able';
     }
-
+    var tdStyle = !isEmptyTr ? {} : this.getLoadingStyle(isPre, isSuf);
     return _react2["default"].createElement(
       'tr',
       {
@@ -678,11 +704,13 @@ var TableRow = function (_Component) {
         onMouseLeave: this.onMouseLeave,
         className: clsPrefix + ' ' + className + ' ' + clsPrefix + '-level-' + indent,
         style: style,
-        'data-row-key': record && record.key ? record.key : hoverKey
+        'data-row-key': record && record.key ? record.key : hoverKey,
+        'data-row-index': this.props.index
         // key={hoverKey}
         , ref: this.bindElement
       },
-      cells.length > 0 ? cells : _react2["default"].createElement('td', { style: { width: 0, padding: 0 } })
+      cells.length > 0 ? cells : isEmptyTr ? // loading暂时去掉
+      _react2["default"].createElement('td', { style: { width: 0, padding: 0 } }) : _react2["default"].createElement('td', { style: { width: 0, padding: 0 } })
     );
   };
 

build/lib/bigData.js

@@ -321,6 +321,8 @@ function bigData(Table) {
     };
 
     BigData.prototype.render = function render() {
+      var _this4 = this;
+
       var data = this.props.data;
       var scrollTop = this.scrollTop;
       var endIndex = this.endIndex,
@@ -356,6 +358,9 @@ function bigData(Table) {
       return _react2["default"].createElement(Table, _extends({}, this.props, {
         data: dataSource,
         lazyLoad: lazyLoad,
+        ref: function ref(el) {
+          return _this4.table = el;
+        },
         handleScrollY: this.handleScrollY,
         scrollTop: scrollTop,
         setRowHeight: this.setRowHeight,
@@ -380,28 +385,28 @@ function bigData(Table) {
   }, _class.propTypes = {
     loadBuffer: _propTypes2["default"].number
   }, _initialiseProps = function _initialiseProps() {
-    var _this4 = this;
+    var _this5 = this;
 
     this.getTreeData = function (expandedKeys, newData) {
-      var startIndex = _this4.startIndex,
+      var startIndex = _this5.startIndex,
-          endIndex = _this4.endIndex;
+          endIndex = _this5.endIndex;
 
-      var data = newData ? newData : _this4.props.data;
+      var data = newData ? newData : _this5.props.data;
-      _this4.cacheExpandedKeys = expandedKeys && new Set(expandedKeys);
+      _this5.cacheExpandedKeys = expandedKeys && new Set(expandedKeys);
       // 深递归 data，截取可视区 data 数组，再将扁平结构转换成嵌套结构
       var sliceTreeList = [];
-      var flatTreeData = _this4.deepTraversal(data);
+      var flatTreeData = _this5.deepTraversal(data);
-      _this4.flatTreeData = flatTreeData;
+      _this5.flatTreeData = flatTreeData;
       sliceTreeList = flatTreeData.slice(startIndex, endIndex);
-      _this4.handleTreeListChange(sliceTreeList);
+      _this5.handleTreeListChange(sliceTreeList);
 
-      _this4.cacheExpandedKeys = expandedKeys && null;
+      _this5.cacheExpandedKeys = expandedKeys && null;
     };
 
     this.deepTraversal = function (treeData) {
       var parentKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
 
-      var _this = _this4;
+      var _this = _this5;
       var cacheExpandedKeys = _this.cacheExpandedKeys,
           _this$expandedRowKeys = _this.expandedRowKeys,
           expandedRowKeys = _this$expandedRowKeys === undefined ? [] : _this$expandedRowKeys,
@@ -415,7 +420,7 @@ function bigData(Table) {
           var _dataCopy$i = dataCopy[i],
               children = _dataCopy$i.children,
               props = _objectWithoutProperties(_dataCopy$i, ["children"]),
-              key = _this4.getRowKey(dataCopy[i], i),
+              key = _this5.getRowKey(dataCopy[i], i),
               dataCopyI = new Object(),
               _isLeaf = children && children.length > 0 ? false : true,
               isExpanded = parentKey === null || expandedKeysSet.has(parentKey) ? expandedKeysSet.has(key) : false;
@@ -433,7 +438,7 @@ function bigData(Table) {
 
           // 优化递归逻辑，如果当前节点是收起状态，则不遍历其子节点
           if (Array.isArray(children) && children.length > 0 && isExpanded) {
-            flatTreeData = flatTreeData.concat(_this4.deepTraversal(children, key));
+            flatTreeData = flatTreeData.concat(_this5.deepTraversal(children, key));
           }
         }
       }
@@ -448,28 +453,28 @@ function bigData(Table) {
         rootId: null,
         _isLeaf: '_isLeaf'
       };
-      var treeData = (0, _utils.convertListToTree)(treeList, attr, _this4.flatTreeKeysMap);
+      var treeData = (0, _utils.convertListToTree)(treeList, attr, _this5.flatTreeKeysMap);
 
-      _this4.startIndex = typeof startIndex !== "undefined" ? startIndex : _this4.startIndex;
+      _this5.startIndex = typeof startIndex !== "undefined" ? startIndex : _this5.startIndex;
-      _this4.endIndex = typeof endIndex !== "undefined" ? endIndex : _this4.endIndex;
+      _this5.endIndex = typeof endIndex !== "undefined" ? endIndex : _this5.endIndex;
 
-      _this4.treeData = treeData;
+      _this5.treeData = treeData;
     };
 
     this.computeCachedRowParentIndex = function (data) {
-      var isTree = _this4.props.isTree;
+      var isTree = _this5.props.isTree;
 
-      var isTreeType = isTree ? true : _this4.checkIsTreeType();
+      var isTreeType = isTree ? true : _this5.checkIsTreeType();
       treeTypeIndex = 0;
       if (isTreeType) {
         data.forEach(function (item, index) {
-          _this4.firstLevelKey[index] = _this4.getRowKey(item, index);
+          _this5.firstLevelKey[index] = _this5.getRowKey(item, index);
-          _this4.cachedRowParentIndex[treeTypeIndex] = index;
+          _this5.cachedRowParentIndex[treeTypeIndex] = index;
           //保存所有的keys跟小标对应起来
-          _this4.keys[treeTypeIndex] = _this4.getRowKey(item, index);
+          _this5.keys[treeTypeIndex] = _this5.getRowKey(item, index);
           treeTypeIndex++;
           if (item.children) {
-            _this4.getData(item.children, index);
+            _this5.getData(item.children, index);
           }
         });
       }
@@ -480,7 +485,7 @@ function bigData(Table) {
       // 关键点是动态的获取startIndex和endIndex
       // 法子一：子节点也看成普通tr，最开始需要设置一共有多少行，哪行显示哪行不显示如何确定
       // 动态取start = current+buffer对应的父节点、end = start+loadCount+row的height为0的行数 展开节点的下一个节点作为end值，
-      var _this = _this4;
+      var _this = _this5;
       var _this$props = _this.props,
           data = _this$props.data,
           height = _this$props.height,
@@ -506,13 +511,13 @@ function bigData(Table) {
       var temp = nextScrollTop;
       var currentKey = void 0;
       while (temp > 0) {
-        var currentRowHeight = _this4.cachedRowHeight[index];
+        var currentRowHeight = _this5.cachedRowHeight[index];
         if (currentRowHeight === undefined) {
-          if (_this4.treeType) {
+          if (_this5.treeType) {
             // currentKey = this.keys[index];
-            currentKey = _this4.flatTreeData[index].key;
+            currentKey = _this5.flatTreeData[index].key;
             currentRowHeight = 0;
-            if (_this4.flatTreeKeysMap.hasOwnProperty(currentKey)) {
+            if (_this5.flatTreeKeysMap.hasOwnProperty(currentKey)) {
               currentRowHeight = rowHeight;
             }
           } else {
@@ -537,9 +542,9 @@ function bigData(Table) {
         if (viewHeight) {
           //有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined
 
-          while (rowsHeight < viewHeight && tempIndex < _this4.cachedRowHeight.length) {
+          while (rowsHeight < viewHeight && tempIndex < _this5.cachedRowHeight.length) {
-            if (_this4.cachedRowHeight[tempIndex]) {
+            if (_this5.cachedRowHeight[tempIndex]) {
-              rowsHeight += _this4.cachedRowHeight[tempIndex];
+              rowsHeight += _this5.cachedRowHeight[tempIndex];
               // if (
               //   (treeType &&
               //     _this.cachedRowParentIndex[tempIndex] !== tempIndex) ||
@@ -569,13 +574,13 @@ function bigData(Table) {
             if (treeType && endIndex > flatTreeData.length || !treeType && endIndex > data.length) {
               endIndex = treeType ? flatTreeData.length : data.length;
             }
-            if (endIndex > _this4.endIndex) {
+            if (endIndex > _this5.endIndex) {
-              _this4.startIndex = startIndex;
+              _this5.startIndex = startIndex;
-              _this4.endIndex = endIndex;
+              _this5.endIndex = endIndex;
               if (treeType) {
-                _this4.handleTreeListChange(flatTreeData.slice(startIndex, endIndex), startIndex, endIndex);
+                _this5.handleTreeListChange(flatTreeData.slice(startIndex, endIndex), startIndex, endIndex);
               }
-              _this4.setState({ needRender: !needRender });
+              _this5.setState({ needRender: !needRender });
               callback(parseInt(currentIndex + rowsInView));
             }
           }
@@ -585,13 +590,13 @@ function bigData(Table) {
             if (startIndex < 0) {
               startIndex = 0;
             }
-            if (startIndex < _this4.startIndex) {
+            if (startIndex < _this5.startIndex) {
-              _this4.startIndex = startIndex;
+              _this5.startIndex = startIndex;
-              _this4.endIndex = _this4.startIndex + loadCount;
+              _this5.endIndex = _this5.startIndex + loadCount;
               if (treeType) {
-                _this4.handleTreeListChange(flatTreeData.slice(startIndex, _this4.endIndex), startIndex, _this4.endIndex);
+                _this5.handleTreeListChange(flatTreeData.slice(startIndex, _this5.endIndex), startIndex, _this5.endIndex);
               }
-              _this4.setState({ needRender: !needRender });
+              _this5.setState({ needRender: !needRender });
               callback(parseInt(currentIndex + rowsInView));
             }
             // console.log(
@@ -605,7 +610,7 @@ function bigData(Table) {
     };
 
     this.onExpand = function (expandState, record, index) {
-      var _this = _this4;
+      var _this = _this5;
       var _this$expandedRowKeys2 = _this.expandedRowKeys,
           expandedRowKeys = _this$expandedRowKeys2 === undefined ? [] : _this$expandedRowKeys2;
       var needRender = _this.state.needRender;
@@ -632,7 +637,7 @@ function bigData(Table) {
       if (!_this.props.expandedRowKeys) {
         if (expandState) {
           expandedRowKeys.push(rowKey);
-          _this4.setState({ needRender: !needRender });
+          _this5.setState({ needRender: !needRender });
         } else {
           var _index = -1;
           expandedRowKeys.forEach(function (r, i) {
@@ -642,7 +647,7 @@ function bigData(Table) {
           });
           if (_index !== -1) {
             expandedRowKeys.splice(_index, 1);
-            _this4.setState({ needRender: !needRender });
+            _this5.setState({ needRender: !needRender });
           }
         }
       }
@@ -650,7 +655,7 @@ function bigData(Table) {
       // expandState为true时，记录下
       _this.props.onExpand(expandState, record);
 
-      if (_this4.treeType) {
+      if (_this5.treeType) {
         //收起和展开时，缓存 expandedKeys
         _this.cacheExpandedKeys = new Set(expandedRowKeys);
         //重新递归数据

build/lib/sort.js

@@ -228,8 +228,13 @@ function sort(Table, Icon) {
 
     this._sortBy = function (pre, after, orderCols, orderColslen, currentIndex) {
       var currentCol = orderCols[currentIndex];
+      var getMultiSorterValueFunc = currentCol.getMultiSorterValue;
       var preKey = pre[currentCol.key];
       var afterKey = after[currentCol.key];
+      if (getMultiSorterValueFunc) {
+        preKey = getMultiSorterValueFunc(pre, currentCol);
+        afterKey = getMultiSorterValueFunc(after, currentCol);
+      }
       var colSortFun = currentCol.sorter;
       if (typeof colSortFun !== 'function') {
         colSortFun = function colSortFun() {
@@ -281,7 +286,7 @@ function sort(Table, Icon) {
       var sort = _this3.props.sort;
 
       var seleObj = void 0;
-      if (!oldData) {
+      if (!oldData.length) {
         oldData = data.concat();
       }
       var sortCol = void 0;

build/lib/utils.js

@@ -8,6 +8,7 @@ exports.Event = exports.EventUtil = exports.tryParseInt = undefined;
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 exports.measureScrollbar = measureScrollbar;
+exports.myBrowser = myBrowser;
 exports.debounce = debounce;
 exports.warningOnce = warningOnce;
 exports.getOffset = getOffset;
@@ -75,6 +76,30 @@ function measureScrollbar() {
   return scrollbarSize;
 }
 
+function myBrowser() {
+  var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
+  var isOpera = userAgent.indexOf("Opera") > -1;
+  if (isOpera) {
+    //判断是否Opera浏览器
+    return "Opera";
+  }
+  if (userAgent.indexOf("Firefox") > -1) {
+    //判断是否Firefox浏览器
+    return "FF";
+  }
+  if (userAgent.indexOf("Chrome") > -1) {
+    return "Chrome";
+  }
+  if (userAgent.indexOf("Safari") > -1) {
+    //判断是否Safari浏览器
+    return "Safari";
+  }
+  if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
+    //判断是否IE浏览器
+    return "IE";
+  }
+}
+
 function debounce(func, wait, immediate) {
   var timeout = void 0;
   return function debounceFunc() {

dist/demo.css

@@ -894,6 +894,20 @@
   .u-dropdown ul.u-table-inline-op-dropdowm li.u-dropdown-menu-item i.uf {
     font-size: 12px; }
 
+.loading-td {
+  position: relative !important;
+  display: block !important; }
+  .loading-td.pre-td {
+    bottom: 0; }
+
+.loading-div {
+  position: absolute;
+  border: none !important; }
+  .loading-div.pre {
+    bottom: 0; }
+  .loading-div.suf {
+    top: 0; }
+
 .selected {
   background: #FFF7E7; }
 

docs/api.md

@@ -76,6 +76,7 @@ import 'bee-table/build/Table.css';
 | loadBuffer       | 使用BigData高阶组件实现大数据加载时，上下加载的缓存 | number| 5
 | hoverContent       | hover某行时，动态渲染行菜单元素，此方法需返回行菜单元素的内容 | Function| 
 | heightConsistent       | 当固定列内容高度超出非固定列时，内容互错行，当此属性为true会将高度同步，当行过多时会有性能影响，所以建议非固定高度如果过高时，超出内容可以显示成省略号 | bool|false 
+| syncFixedRowHeight | 当bodyDisplayInRow为false的时候，同步固定列的高度 | bool | - |
 | height | 自定义表格行高 | number | - |
 | headerHeight | 自定义表头行高 | number | - |
 | headerDisplayInRow | 设置表头的内容显示一行，超出显示省略号 | bool | true |

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "2.3.14",
+ "version": "2.3.15-beta.20",
  "description": "Table ui component for react",
  "keywords": [
   "react",

src/Table.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classes from 'component-classes';
 import TableRow from './TableRow';
 import TableHeader from './TableHeader';
-import { measureScrollbar, debounce, warningOnce ,getMaxColChildrenLength} from './lib/utils';
+import { measureScrollbar, debounce, warningOnce ,getMaxColChildrenLength } from './lib/utils';
 import shallowequal from 'shallowequal';
 import addEventListener from 'tinper-bee-core/lib/addEventListener';
 import ColumnManager from './ColumnManager';
@@ -103,6 +103,7 @@ const defaultProps = {
   setRowParentIndex:()=>{},
   tabIndex:'0',
   heightConsistent:false,
+  syncFixedRowHeight: false,
   size: 'md',
   rowDraggAble:false,
   hideDragHandle:false,
@@ -164,6 +165,7 @@ class Table extends Component {
     this.getFooter = this.getFooter.bind(this);
     this.getEmptyText = this.getEmptyText.bind(this);
     this.getHeaderRowStyle = this.getHeaderRowStyle.bind(this);
+    this.manualSyncFixedTableRowHeight = this.manualSyncFixedTableRowHeight.bind(this)
     this.syncFixedTableRowHeight = this.syncFixedTableRowHeight.bind(this);
     this.resetScrollX = this.resetScrollX.bind(this);
     this.findExpandedRow = this.findExpandedRow.bind(this);
@@ -178,6 +180,7 @@ class Table extends Component {
     this.leftColumnsLength  //左侧固定列的长度
     this.centerColumnsLength  //非固定列的长度
     this.columnsChildrenList = [];//复杂表头、所有叶子节点
+    this.dataChanged = false; // 数据是否改变
   }
   componentWillMount() {
     this.centerColumnsLength = this.columnManager.centerColumns().length
@@ -276,15 +279,47 @@ class Table extends Component {
     if (prevScrollY && currentScrollY && (prevScrollY !== currentScrollY) && this.props.lazyLoad && !this.props.ignoreScrollYChange) {
       this.bodyTable.scrollTop = 0
     } else if (this.props.ignoreScrollYChange && currentScrollY && prevScrollY && (prevScrollY !== currentScrollY)) {
-      const distance = this.bodyTable.scrollTop + (currentScrollY - prevScrollY)
+      const bodyScrollTop = this.bodyTable.scrollTop
-      if (distance < 0) {
+      if (bodyScrollTop === 0) { // 在顶部的时候，滚动条不用动
-        this.bodyTable.scrollTop = 0
+        this.bodyTable.scrollTop = 0;
       } else {
-        this.bodyTable.scrollTop = distance
+        const distance = bodyScrollTop + currentScrollY - prevScrollY;
+        if (distance < 0) {
+          this.bodyTable.scrollTop = 0;
+        } else {
+          const { scrollHeight, scrollTop } = this.bodyTable
+          const bottomDistance = Math.abs(scrollHeight - scrollTop - prevScrollY) // 在最底部的时候也不用滚动滚动条
+          if (bottomDistance < 5) { // 有些dom计算不是十分精确，设置一个值来缓冲一下
+            this.bodyTable.scrollTop = scrollTop + prevScrollY - currentScrollY
+          } else {
+            this.bodyTable.scrollTop = distance;
+          }
+        }
       }
     }
     // 是否传入 scroll中的y属性，如果传入判断是否是整数，如果是则进行比较 。bodyTable 的clientHeight进行判断
     this.isShowScrollY();
+    if (this.bodyTable) {
+      const currentOverflowX = window.getComputedStyle(this.bodyTable).overflowX;
+      if (!this.props.scroll.x && currentOverflowX === 'scroll') {
+        this.bodyTable.style.overflowX = 'hidden';
+      }
+      if (this.props.scroll.x && currentOverflowX !== 'scroll') {
+        // 此处应该对比一下实际的
+        if (this.computeWidth > this.contentDomWidth) {
+          this.bodyTable.style.overflowX = 'scroll';
+        }
+      }
+    }
+    if (this.bodyTableOuter) { // 隐藏几个不需要真正滚动的父元素的滚动条
+      this.bodyTableOuter.style.overflowY = 'hidden'
+    }
+    if (this.fixedColumnsBodyLeftOuter) {
+      this.fixedColumnsBodyLeftOuter.style.overflowY = 'hidden'
+    }
+    if (this.fixedColumnsBodyRightOuter) {
+      this.fixedColumnsBodyRightOuter.style.overflowY = 'hidden'
+    }
   }
 
   componentWillUnmount() {
@@ -746,7 +781,7 @@ class Table extends Component {
     const expandIconColumnIndex = props.expandIconColumnIndex
     if(props.lazyLoad && props.lazyLoad.preHeight && indent == 0){
       rst.push(
-        <TableRow onPaste={onPaste} height={props.lazyLoad.preHeight} columns={[]} className='' key={'table_row_first'} store={this.store} visible = {true}/>
+        <TableRow onPaste={onPaste} containerWidth={this.contentDomWidth} isPre height={props.lazyLoad.preHeight} columns={[]} className='' key={'table_row_first'} store={this.store} visible = {true}/>
       )
     }
     const lazyCurrentIndex =  props.lazyLoad && props.lazyLoad.startIndex ?props.lazyLoad.startIndex :0;
@@ -757,7 +792,7 @@ class Table extends Component {
       const record = data[i];
       const key = this.getRowKey(record, i);
       // 兼容 NCC 以前的业务逻辑，支持外部通过 record 中的 isleaf 字段，判断是否为叶子节点
-      record['_isLeaf'] = typeof record['isleaf'] === 'boolean' ? record['isleaf'] : record['_isLeaf'];
+      typeof record['isleaf'] === 'boolean' && (record['_isLeaf'] = record['isleaf']);
       // _isLeaf 字段是在 bigData 里添加的，只有层级树大数据场景需要该字段
       // _isLeaf 有三种取值情况：true / false / null。（Table内部字段）
       const _isLeaf = typeof record['_isLeaf'] === 'boolean' ? record['_isLeaf'] : null;
@@ -889,7 +924,7 @@ class Table extends Component {
 
     if(props.lazyLoad && props.lazyLoad.sufHeight && indent == 0){
       rst.push(
-        <TableRow onPaste={onPaste} height={props.lazyLoad.sufHeight} key={'table_row_end'} columns={[]} className='' store={this.store} visible = {true}/>
+        <TableRow onPaste={onPaste} containerWidth={this.contentDomWidth} isSuf height={props.lazyLoad.sufHeight} key={'table_row_end'} columns={[]} className='' store={this.store} visible = {true}/>
       )
     }
     if (!this.isTreeType) {
@@ -995,7 +1030,7 @@ class Table extends Component {
       if(this.props.data.length == 0 && this.props.headerScroll ){
         bodyStyle.overflowX = 'hidden';
       }
-      if (!footerScroll) {
+      if (!footerScroll && this.computeWidth > this.contentDomWidth) {
         bodyStyle.overflowX = bodyStyle.overflowX || 'auto';
       }
     }
@@ -1007,6 +1042,11 @@ class Table extends Component {
         // bodyStyle.height = bodyStyle.height || scroll.y;
         innerBodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
         innerBodyStyle.overflowY = bodyStyle.overflowY || 'scroll';
+        if (this.computeWidth > this.contentDomWidth) {
+          innerBodyStyle.overflowX = 'scroll';
+        } else if (this.contentWidth === this.contentDomWidth) {
+          innerBodyStyle.overflowX = 'hidden';
+        }
       } else {
         bodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
       }
@@ -1040,7 +1080,9 @@ class Table extends Component {
               headStyle.overflow = 'hidden';
               innerBodyStyle.overflowX = 'auto'; //兼容expand场景、子表格含有固定列的场景
             }else{
-              bodyStyle.marginBottom = `-${scrollbarWidth}px`;
+              if (this.computeWidth > this.contentDomWidth) {
+                bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
+              }
             }
 
           }else{
@@ -1076,6 +1118,9 @@ class Table extends Component {
       if ( !fixed && this.contentDomWidth < this.contentWidth) {
         tableStyle.width = this.contentWidth - this.columnManager.getLeftColumnsWidth(this.contentWidth) - this.columnManager.getRightColumnsWidth(this.contentWidth);
       }
+      if (this.bodyTable && !fixed && this.contentDomWidth === this.contentWidth) {
+        tableStyle.width = this.bodyTable.clientWidth
+      }
       const tableBody = hasBody ? getBodyWrapper(
         <tbody className={`${clsPrefix}-tbody`} onMouseLeave={this.onBodyMouseLeave}>
           {this.getRows(columns, fixed)}
@@ -1093,7 +1138,6 @@ class Table extends Component {
     };
 
     let headTable;
-
     if (useFixedHeader) {
       headTable = (
         <div
@@ -1112,14 +1156,15 @@ class Table extends Component {
       <div
         className={`${clsPrefix}-body`}
         style={bodyStyle}
-        ref={(el)=>{this.bodyTable = el}}
         onMouseOver={this.detectScrollTarget}
         onTouchStart={this.detectScrollTarget}
-        onScroll={this.handleBodyScroll}
+        ref={(el)=>{this.bodyTableOuter = el}}
         onMouseLeave={this.onBodyMouseLeave}
       >
         {this.renderDragHideTable()}
-        {renderTable(!useFixedHeader)}
+        <div className="scroll-container" onScroll={this.handleBodyScroll} ref={(el)=>{this.bodyTable = el}} style={{...bodyStyle}}>
+          {renderTable(!useFixedHeader)}
+        </div>
       </div>
     );
 
@@ -1140,13 +1185,13 @@ class Table extends Component {
           <div
             style={{...innerBodyStyle}}
             className={`${clsPrefix}-body-inner`}
-            ref={refName}
+            ref={el => this[`${refName}Outer`] = el}
             onMouseOver={this.detectScrollTarget}
             onTouchStart={this.detectScrollTarget}
-            onScroll={this.handleBodyScroll}
           >
-            {renderTable(!useFixedHeader)}
+            <div className="fixed-scroll-container" ref={refName} style={{...innerBodyStyle}} onScroll={this.handleBodyScroll}>
-            {/* <div className="scroll-dom" style={{height:`${this.scrollbarWidth}px`}}></div> */}
+              {renderTable(!useFixedHeader)}
+            </div>
           </div>
         </div>
       );
@@ -1218,16 +1263,33 @@ class Table extends Component {
 
   }
 
+  getFlatRecords = data => {
+    var result = []
+    for (var i = 0; i < data.length; i++) {
+      result.push(data[i])
+      if ((data[i].children || []).length) {
+        result = result.concat(this.getFlatRecords(data[i].children))
+      }
+    }
+    return result
+  };
+
+  manualSyncFixedTableRowHeight() {
+    this.dataChanged = true
+    this.syncFixedTableRowHeight()
+  }
+
   syncFixedTableRowHeight() {
     //this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题
-    const { clsPrefix, height, headerHeight,columns,heightConsistent, bodyDisplayInRow } = this.props;
+    const { clsPrefix, height, headerHeight,columns,heightConsistent, bodyDisplayInRow, lazyLoad, syncFixedRowHeight } = this.props;
     const headRows = this.headTable ?
       this.headTable.querySelectorAll('thead') :
       this.bodyTable.querySelectorAll('thead');
     const expandedRows = this.bodyTable.querySelectorAll(`.${clsPrefix}-expanded-row`) || [];
     const bodyRows = this.bodyTable.querySelectorAll(`.${clsPrefix}-row`) || [];
-    const leftBodyRows = this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll(`.${clsPrefix}-row`) || [];
+    const leftBodyRows = !this.dataChanged && this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll(`.${clsPrefix}-row`) || [];
-    const rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll(`.${clsPrefix}-row`) || [];
+    const rightBodyRows = !this.dataChanged && this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll(`.${clsPrefix}-row`) || [];
+    this.dataChanged = false
     const fixedColumnsHeadRowsHeight = [].map.call(
       headRows, row =>{
         let height = headerHeight;
@@ -1236,15 +1298,23 @@ class Table extends Component {
         }
         return headerHeight ? height : (parseInt(row.getBoundingClientRect().height) || 'auto')}
     );
+    const flatRecords = this.getFlatRecords(this.props.data || [])
     const fixedColumnsBodyRowsHeight = [].map.call(
       bodyRows, (row,index) =>{
         let rsHeight = height;
         if(bodyDisplayInRow && rsHeight){
           return rsHeight;
         }else{
+          const rowKey = row.getAttribute('data-row-key')
+          const record = flatRecords.find(record => record.key === rowKey) || {}
+          const leafKey = 'isleaf' in record ? 'isleaf' : '_isLeaf' in record ? '_isLeaf' : null // ncc传递这俩属性区分是否是子节点
+          const isLeaf = leafKey && record[leafKey] === true
+          if (isLeaf) {
+            return Number((Number(row.getBoundingClientRect().height)).toFixed(2)) || 'auto';
+          }
           // 为了提高性能，默认获取主表的高度，但是有的场景中固定列的高度比主表的高度高，所以提供此属性，会统计所有列的高度取最大的，设置
           // 内容折行显示，并又设置了 height 的情况下，也要获取主表高度
-          if(heightConsistent || (!bodyDisplayInRow && rsHeight)){
+          if(heightConsistent || (!bodyDisplayInRow && rsHeight && syncFixedRowHeight)){
             let leftHeight,rightHeight,currentHeight,maxHeight;
             leftHeight = leftBodyRows[index]?Number(leftBodyRows[index].getBoundingClientRect().height).toFixed(2):0; // 有些浏览器中，取到的高度是小数，直接parseInt有问题，保留两位小数处理
             rightHeight = rightBodyRows[index]?Number(rightBodyRows[index].getBoundingClientRect().height).toFixed(2):0;

src/Table.scss

@@ -1139,3 +1139,22 @@ $icon-color:#505F79;
     }
   }
 }
+
+.loading-td {
+  position: relative !important;
+  display: block !important;
+
+  &.pre-td {
+    bottom: 0;
+  }
+}
+.loading-div {
+  position: absolute;
+  border: none !important;
+  &.pre {
+    bottom: 0;
+  }
+  &.suf {
+    top: 0;
+  }
+} 

src/TableHeader.js

@@ -106,7 +106,7 @@ class TableHeader extends Component {
       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.fixedRightHeaderTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
       table.contentTableHeader  = contentTable.querySelector('.u-table-scroll .u-table-header');
       table.fixedLeftBodyTable = contentTable.querySelectorAll('.u-table-fixed-left .u-table-body-outer') ;
       if (table.fixedLeftBodyTable) {
@@ -121,6 +121,10 @@ class TableHeader extends Component {
       }
 
       table.innerTableBody= contentTable.querySelector('.u-table-scroll .u-table-body table');
+      table.fixedLeftHeaderTableBody = table.fixedLeftHeaderTable && table.fixedLeftHeaderTable.querySelector('table') || null;
+      table.fixedRightHeaderTableBody = table.fixedRightHeaderTable && table.fixedRightHeaderTable.querySelector('table') || null;
+      table.fixedLeftInnerTableBody = table.fixedLeftBodyTable && table.fixedLeftBodyTable.querySelector('table') || null;
+      table.fixedRightInnerTableBody = table.fixedRightBodyTable && table.fixedRightBodyTable.querySelector('table') || null;
       table.fixedLeftBodyRows = table.fixedLeftBodyTable && table.fixedLeftBodyTable.querySelectorAll('tr') || [];
       table.fixedRightBodyRows = table.fixedRightBodyTable && table.fixedRightBodyTable.querySelectorAll('tr') || [];
     }
@@ -171,8 +175,10 @@ class TableHeader extends Component {
 
 
   doEventList(trs,action){
-    for (let index = 0; index < trs.length; index++) {
+    if (trs && HTMLCollection.prototype.isPrototypeOf(trs) && action) {
-      action(trs[index]);
+      for (let index = 0; index < trs.length; index++) {
+        action(trs[index]);
+      }
     }
   }
 
@@ -418,21 +424,22 @@ class TableHeader extends Component {
                 //找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
                 this.table.contentTableHeader.style.overflowX = 'scroll';
                 this.optTableMargin( this.table.fixedLeftHeaderTable,scrollbarWidth);
-                this.optTableMargin( this.table.fixedRighHeadertTable,scrollbarWidth);
+                this.optTableMargin( this.table.fixedRightHeaderTable,scrollbarWidth);
               }else{ //大于 0 不显示滚动条
                 this.table.contentTableHeader.style.overflowX = 'hidden';
                 this.optTableMargin( this.table.fixedLeftHeaderTable,0);
-                this.optTableMargin( this.table.fixedRighHeadertTable,0);
+                this.optTableMargin( this.table.fixedRightHeaderTable,0);
             }
           }else{
+          const scrollContainers = this.table.tableBody.querySelectorAll('.scroll-container') || []
           if(showScroll < 0){
-                this.table.tableBody.style.overflowX = 'auto';
+                scrollContainers[0] ? scrollContainers[0].style.overflowX = 'auto' : null
                 this.optTableMargin( this.table.fixedLeftBodyTable,'-'+scrollbarWidth);
                 this.optTableMargin( this.table.fixedRightBodyTable,'-'+scrollbarWidth);
                 this.optTableScroll( this.table.fixedLeftBodyTable,{x:'scroll'});
                 this.optTableScroll( this.table.fixedRightBodyTable,{x:'scroll'});
           }else{
-            this.table.tableBody.style.overflowX = 'hidden';
+            scrollContainers[0] ? scrollContainers[0].style.overflowX = 'hidden' : null
             this.optTableMargin( this.table.fixedLeftBodyTable,0);
             this.optTableMargin( this.table.fixedRightBodyTable,0);
             this.optTableScroll( this.table.fixedLeftBodyTable,{x:'auto'});
@@ -445,7 +452,7 @@ class TableHeader extends Component {
           }
           // console.log('this.drag.contentTableML',this.drag.contentTableML,'diff',diff);
           // debugger
-
+          this.syncFixedBodyTableWidth() // 同步body中table的宽度
           const contentTablePar = this.table.contentTableHeader.parentNode;
           // left、right缩小的内容，在没有滚动条时，需要将宽度同步到到最后一列
           // diff<0 往里拖，
@@ -460,12 +467,25 @@ class TableHeader extends Component {
           // }
           if(this.drag.fixedType == 'left') {
             contentTablePar.style.marginLeft = this.drag.contentTableML + diff + 'px'
-            
           }else {
             contentTablePar.style.marginRight = this.drag.contentTableMR + diff + 'px'
           }
-
+          const containerWidth = contentTablePar.getBoundingClientRect().width
-
+          const tableWidth = this.table.innerTableBody.getBoundingClientRect().width
+          const scrollContainers = this.table.tableBody.querySelectorAll('.scroll-container') || []
+          if (tableWidth > containerWidth) {
+            scrollContainers[0] ? scrollContainers[0].style.overflowX = 'auto' : null
+            this.optTableMargin( this.table.fixedLeftBodyTable,'-'+scrollbarWidth);
+            this.optTableMargin( this.table.fixedRightBodyTable,'-'+scrollbarWidth);
+            this.optTableScroll( this.table.fixedLeftBodyTable,{x:'scroll'});
+            this.optTableScroll( this.table.fixedRightBodyTable,{x:'scroll'});
+          } else {
+            scrollContainers[0] ? scrollContainers[0].style.overflowX = 'hidden' : null
+            this.optTableMargin( this.table.fixedLeftBodyTable,0);
+            this.optTableMargin( this.table.fixedRightBodyTable,0);
+            this.optTableScroll( this.table.fixedLeftBodyTable,{x:'auto'});
+            this.optTableScroll( this.table.fixedRightBodyTable,{x:'auto'});
+          }
         }
        
       }else {
@@ -476,6 +496,16 @@ class TableHeader extends Component {
     this.drag.newWidth && onDraggingBorder && onDraggingBorder(event, this.drag.newWidth);
   }
 
+  syncFixedBodyTableWidth = () => {
+    let { fixedLeftHeaderTableBody, fixedLeftInnerTableBody, fixedRightHeaderTableBody, fixedRightInnerTableBody } = this.table
+    if (fixedLeftHeaderTableBody && fixedLeftInnerTableBody) {
+      fixedLeftInnerTableBody.style.width = fixedLeftHeaderTableBody.getBoundingClientRect().width + 'px'
+    }
+    if (fixedRightHeaderTableBody && fixedRightInnerTableBody) {
+      fixedRightInnerTableBody.style.width = fixedRightHeaderTableBody.getBoundingClientRect().width + 'px'
+    }
+  }
+
     /**
    * 调整列宽的up事件
    * @memberof TableHeader
@@ -536,7 +566,13 @@ class TableHeader extends Component {
       const innerTable = table.querySelector('.u-table-body-inner');
       if(innerTable){
         //fixbug: 拖拽列宽后，滚动条滚到表格底部，会导致固定列和非固定列错行
-        overflow.x && (innerTable.style.overflowX = overflow.x);
+        if (overflow.x) {
+          const fixedScrollContainers = innerTable.querySelectorAll('.fixed-scroll-container')
+          if (fixedScrollContainers && fixedScrollContainers.length) {
+            fixedScrollContainers[0] && (fixedScrollContainers[0].style.overflowX = overflow.x);
+            fixedScrollContainers[1] && (fixedScrollContainers[1].style.overflowX = overflow.x);
+          }
+        }
         overflow.y && (innerTable.style.overflowY = overflow.y);
       }
 

src/TableRow.js

@@ -467,14 +467,24 @@ class TableRow extends Component{
     this.element = el
   }
 
+  getLoadingStyle = (isPre, isSuf) => {
+    if (isPre) {
+      return this.element && this.element.nextSibling ? this.element.nextSibling .getBoundingClientRect() : {}
+    }
+    if (isSuf) {
+      return this.element && this.element.previousSibling ? this.element.previousSibling.getBoundingClientRect() : {}
+    }
+  }
+
   render() {
     const {
-      clsPrefix, columns, record, height, visible, index,onPaste,
+      clsPrefix, columns, record, height, visible, index,onPaste, isPre, isSuf, containerWidth,
       expandIconColumnIndex, expandIconAsCell, expanded, useDragHandle,rowDraggAble,
       expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,bodyDisplayInRow
       ,expandedIcon,collapsedIcon, hoverKey,lazyStartIndex,lazyEndIndex, expandIconCellWidth, getCellClassName
     } = this.props;
     const {notRowDrag} = this.state;
+    const isEmptyTr = isPre || isSuf
     let showSum = false;
     let { className } = this.props;
     if (this.state.hovered) {
@@ -555,7 +565,7 @@ class TableRow extends Component{
     if(rowDraggAble && !useDragHandle && !notRowDrag) {
       className += ' row-dragg-able'
     }
-
+    const tdStyle = !isEmptyTr ? {} : this.getLoadingStyle(isPre, isSuf)
     return (
       <tr
         draggable={rowDraggAble && !useDragHandle && !notRowDrag}
@@ -570,7 +580,10 @@ class TableRow extends Component{
         // key={hoverKey}
         ref={this.bindElement}
       >
-        {cells.length>0?cells:<td style={{width:0,padding:0}}></td>}
+        {cells.length > 0 ? cells : isEmptyTr ? // loading暂时去掉
+        <td style={{width: 0,padding: 0}}>
+        </td> : <td style={{width: 0,padding: 0}}>
+        </td>}
       </tr>
     );
   }

src/lib/bigData.js

@@ -573,6 +573,7 @@ export default function bigData(Table) {
           {...this.props}
           data={dataSource}
           lazyLoad={lazyLoad}
+          ref={el => this.table = el}
           handleScrollY={this.handleScrollY}
           scrollTop={scrollTop}
           setRowHeight={this.setRowHeight}

src/lib/sort.js

@@ -188,7 +188,7 @@ export default function sort(Table, Icon) {
       let { data, oldData = [], flatColumns } = this.state;
       let { sort } = this.props;
       let seleObj;
-      if (!oldData) {
+      if (!oldData.length) {
         oldData = data.concat();
       }
       let  sortCol ;

src/lib/utils.js

@@ -41,6 +41,25 @@ export function measureScrollbar(direction = 'vertical') {
   return scrollbarSize;
 }
 
+export function myBrowser() {
+  var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
+  var isOpera = userAgent.indexOf("Opera") > -1;
+  if (isOpera) { //判断是否Opera浏览器
+      return "Opera"
+  }
+  if (userAgent.indexOf("Firefox") > -1) { //判断是否Firefox浏览器
+      return "FF";
+  }
+  if (userAgent.indexOf("Chrome") > -1) {
+      return "Chrome";
+  }
+  if (userAgent.indexOf("Safari") > -1) { //判断是否Safari浏览器
+      return "Safari";
+  }
+  if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) { //判断是否IE浏览器
+      return "IE";
+  }
+}
 
 export function debounce(func, wait, immediate) {
   let timeout;