fix: change the way to judge whether an array is empty

build/Table.js

@@ -241,6 +241,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 +292,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);
@@ -384,6 +398,7 @@ var Table = function (_Component) {
     _this.leftColumnsLength; //左侧固定列的长度
     _this.centerColumnsLength; //非固定列的长度
     _this.columnsChildrenList = []; //复杂表头、所有叶子节点
+    _this.dataChanged = false; // 数据是否改变
     return _this;
   }
 
@@ -418,6 +433,7 @@ var Table = function (_Component) {
         showRowNum = _props.showRowNum;
 
     if ('data' in nextProps) {
+      this.dataChanged = JSON.stringify(this.props.data) !== JSON.stringify(nextProps.data);
       this.setState({
         data: nextProps.data
       });
@@ -478,9 +494,61 @@ 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';
+        } else {
+          this.bodyTable.style.overflowX = 'hidden';
+        }
+      }
+    }
+    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() {
@@ -926,7 +994,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;
@@ -1165,7 +1233,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 +1245,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 {
+          innerBodyStyle.overflowX = 'hidden';
+        }
       } else {
         bodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
       }
@@ -1210,7 +1283,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 {
             // 没有数据时，表头滚动条隐藏问题
@@ -1262,7 +1337,6 @@ var Table = function (_Component) {
     };
 
     var headTable = void 0;
-
     if (useFixedHeader) {
       headTable = _react2["default"].createElement(
         'div',
@@ -1284,16 +1358,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 +1395,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,
-            onScroll: this.handleBodyScroll
+            onTouchStart: this.detectScrollTarget
           },
-          renderTable(!useFixedHeader)
+          _react2["default"].createElement(
+            'div',
+            { className: 'fixed-scroll-container', ref: refName, style: _extends({}, innerBodyStyle), onScroll: this.handleBodyScroll },
+            renderTable(!useFixedHeader)
+          )
         )
       );
     }
@@ -1416,8 +1500,6 @@ var Table = function (_Component) {
   };
 
   Table.prototype.syncFixedTableRowHeight = function syncFixedTableRowHeight() {
-    var _this5 = this;
-
     //this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题
     var _props9 = this.props,
         clsPrefix = _props9.clsPrefix,
@@ -1430,8 +1512,9 @@ var Table = function (_Component) {
     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 rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll('.' + clsPrefix + '-row') || [];
+    var leftBodyRows = !this.dataChanged && this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.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,11 +1522,21 @@ 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) {
@@ -1451,13 +1544,13 @@ var Table = function (_Component) {
               rightHeight = void 0,
               currentHeight = void 0,
               maxHeight = void 0;
-          leftHeight = leftBodyRows[index] ? parseInt(leftBodyRows[index].getBoundingClientRect().height) : 0;
-          rightHeight = rightBodyRows[index] ? parseInt(rightBodyRows[index].getBoundingClientRect().height) : 0;
-          currentHeight = parseInt(row.getBoundingClientRect().height);
+          leftHeight = leftBodyRows[index] ? Number(leftBodyRows[index].getBoundingClientRect().height).toFixed(2) : 0; // 有些浏览器中，取到的高度是小数，直接parseInt有问题，保留两位小数处理
+          rightHeight = rightBodyRows[index] ? Number(rightBodyRows[index].getBoundingClientRect().height).toFixed(2) : 0;
+          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 +1558,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;
-      if (!exHeight) {
-        exHeight = row && parseInt(row.getBoundingClientRect().height) || 'auto';
-        try {
-          //子表数据减少时，动态计算高度
-          var td = row.querySelector('td');
-          var tdPadding = _this5.getTdPadding(td);
-          var trueheight = parseInt(row.querySelectorAll('.u-table')[0].getBoundingClientRect().height);
-          exHeight = trueheight + tdPadding;
-        } catch (error) {}
-      }
+      var exHeight = row && parseInt(row.getBoundingClientRect().height) || 'auto';
+      // fix: ie 展开表格计算渲染bug
+      // try {//子表数据减少时，动态计算高度
+      //   let td = row.querySelector('td');
+      //   let tdPadding = this.getTdPadding(td);
+      //   let trueheight = parseInt(row.querySelectorAll('.u-table')[0].getBoundingClientRect().height);
+      //   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 +1591,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 +1738,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 +1792,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 +1824,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 来渲染数据
-    if (!render) {
-      switch (column.fieldType) {
-        case 'link':
-          {
-            text = this.renderLinkType(text, record, index, column.linkConfig);
-            break;
-          }
-        case 'bool':
-          {
-            text = this.renderBoolType(text, column.boolConfig);
-            break;
-          }
-        case 'currency':
-          {
-            var config = {
-              precision: 2, // 精度值,需要大于0
-              thousand: true, // 是否显示千分符号
-              makeUp: true, // 末位是否补零
-              preSymbol: '', // 前置符号
-              nextSymbol: '' // 后置符号
-            };
-            text = this.renderNumber(text, _extends({}, config, column.currencyConfig), column.width);
-            break;
-          }
-        case 'number':
-          {
-            var _config = {
-              precision: 0, // 精度值,需要大于0
-              thousand: true, // 是否显示千分符号
-              makeUp: false, // 末位是否补零
-              preSymbol: '', // 前置符号
-              nextSymbol: '' // 后置符号
-            };
-            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;
-          }
+    // 如果是固定列在主表格上就渲染null
+    if (column.fixed && !fixed) {
+      text = null;
+    } else {
+      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;
+        }
+      }
+
+      // 根据 fieldType 来渲染数据
+      if (!render) {
+        switch (column.fieldType) {
+          case 'link':
+            {
+              text = this.renderLinkType(text, record, index, column.linkConfig);
+              break;
+            }
+          case 'bool':
+            {
+              text = this.renderBoolType(text, column.boolConfig);
+              break;
+            }
+          case 'currency':
+            {
+              var config = {
+                precision: 2, // 精度值,需要大于0
+                thousand: true, // 是否显示千分符号
+                makeUp: true, // 末位是否补零
+                preSymbol: '', // 前置符号
+                nextSymbol: '' // 后置符号
+              };
+              text = this.renderNumber(text, _extends({}, config, column.currencyConfig), column.width);
+              break;
+            }
+          case 'number':
+            {
+              var _config = {
+                precision: 0, // 精度值,需要大于0
+                thousand: true, // 是否显示千分符号
+                makeUp: false, // 末位是否补零
+                preSymbol: '', // 前置符号
+                nextSymbol: '' // 后置符号
+              };
+              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,6 +142,7 @@ 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') || [];
@@ -230,13 +231,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.doEventList(this.table.tr, function (tr) {
-      _this5.eventListen(events, '', tr); //表示把事件添加到th元素上
-    });
+    this.eventListen([{ key: 'mouseup', fun: this.onTrMouseUp }], '', document.body);
+    this.eventListen([{ key: 'mousemove', fun: this.onTrMouseMove }], '', document.body);
+
+    // 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 +252,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 +437,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 +455,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 +501,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 +522,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 +530,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 +544,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 +575,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 +592,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;
-    if (type == 'online' && _this8.props.dragborder) {
+    var fixedType = currentElement.getAttribute('data-th-fixed');
+    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 +627,44 @@ var _initialiseProps = function _initialiseProps() {
         console.log('Key must be set for column!');
         return;
       }
-      var currentObj = _this8.table.cols[currentIndex];
-      _this8.drag.currIndex = currentIndex;
-      _this8.drag.oldLeft = event.clientX;
-      _this8.drag.oldWidth = parseInt(currentObj.style.width);
-      _this8.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);
-      if (!_this8.tableOldWidth) {
-        _this8.tableOldWidth = _this8.drag.tableWidth; //this.getTableWidth();
+      var currentObj = _this7.table.cols[currentIndex];
+      _this7.drag.currIndex = currentIndex;
+      _this7.drag.oldLeft = event.clientX;
+      _this7.drag.oldWidth = parseInt(currentObj.style.width);
+      _this7.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth;
+      _this7.drag.tableWidth = parseInt(_this7.table.table.style.width ? _this7.table.table.style.width : _this7.table.table.scrollWidth);
+      if (!_this7.tableOldWidth) {
+        _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;
-      var th = _this8.getTargetToType(targetEvent);
+      if (!_this7.props.draggable) return;
+      var th = _this7.getTargetToType(targetEvent);
       th.setAttribute('draggable', true); //添加交换列效果
-      _this8.drag.option = 'dragAble';
-      _this8.currentDome = th;
+      _this7.drag.option = 'dragAble';
+      _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 +674,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++) {
-      var da = _this8.table.cols[index];
+    for (var index = 0; index < _this7.table.cols.length; index++) {
+      var da = _this7.table.cols[index];
       tableWidth += parseInt(da.style.width);
     }
     return tableWidth - offWidth;
@@ -645,7 +684,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 +692,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;
-    var _props4 = _this8.props,
+    if (!_this7.props.dragborder && !_this7.props.draggable) return;
+    var _props4 = _this7.props,
         clsPrefix = _props4.clsPrefix,
         dragborder = _props4.dragborder,
         contentDomWidth = _props4.contentDomWidth,
@@ -677,20 +716,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 diff = event.clientX - _this8.drag.oldLeft;
-      var newWidth = _this8.drag.oldWidth + diff;
-      _this8.drag.newWidth = newWidth > 0 ? newWidth : _this8.minWidth;
-      if (newWidth > _this8.minWidth) {
+      var currentCols = _this7.table.cols[_this7.drag.currIndex];
+      var diff = event.clientX - _this7.drag.oldLeft;
+      var newWidth = _this7.drag.oldWidth + diff;
+      _this7.drag.newWidth = newWidth > 0 ? newWidth : _this7.minWidth;
+      if (newWidth > _this7.minWidth) {
         currentCols.style.width = newWidth + 'px';
 
         // displayinrow 判断、 固定行高判断 
         if (!bodyDisplayInRow) {
-          _this8.table.bodyRows.forEach(function (row, index) {
-            var leftRow = _this8.table.fixedLeftBodyRows[index];
-            var rightRow = _this8.table.fixedRightBodyRows[index];
+          _this7.table.bodyRows.forEach(function (row, index) {
+            var leftRow = _this7.table.fixedLeftBodyRows[index];
+            var rightRow = _this7.table.fixedRightBodyRows[index];
             if (leftRow || rightRow) {
               var height = row.getBoundingClientRect().height;
               leftRow && (leftRow.style.height = height + "px");
@@ -700,74 +739,113 @@ var _initialiseProps = function _initialiseProps() {
         }
 
         //hao 支持固定表头拖拽 修改表体的width
-        if (_this8.fixedTable.cols) {
-          _this8.fixedTable.cols[_this8.drag.currIndex].style.width = newWidth + "px";
+        if (_this7.fixedTable.cols) {
+          _this7.fixedTable.cols[_this7.drag.currIndex].style.width = newWidth + "px";
         }
 
-        var newDiff = parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width);
-        if (newDiff > 0) {
-          //缩小
-          var lastWidth = _this8.lastColumWidth + newDiff;
-          _this8.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头
-          _this8.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体
+        var contentTableSWidth = _this7.drag.contentTableSWidth - _this7.drag.contentTableCWidth;
+        // console.log('contentTableSWidth+diff',contentTableSWidth+diff,'diff',diff);
+        if (diff < 0 && contentTableSWidth + diff < 0) {
+          var headerCols = _this7.table.tableHeaderCols || _this7.table.cols;
+          var lastWidth = _this7.lastColumWidth - (contentTableSWidth + diff);
+          // 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 (headerScroll) {
-          if (showScroll < 0) {
-            //小于 0 出现滚动条
-            //找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
-            _this8.table.contentTableHeader.style.overflowX = 'scroll';
-            _this8.optTableMargin(_this8.table.fixedLeftHeaderTable, scrollbarWidth);
-            _this8.optTableMargin(_this8.table.fixedRighHeadertTable, scrollbarWidth);
+        // 内容区非固定列场景拖拽
+        if (!_this7.drag.fixedType) {
+
+          // let newDiff = (parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width));
+          // if(newDiff > 0){//缩小
+          //   let lastWidth = this.lastColumWidth + newDiff;
+          //   this.table.cols[lastShowIndex].style.width = lastWidth +"px";//同步表头
+          //   this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px";//同步表体
+
+          // }
+
+          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.fixedRighHeadertTable, scrollbarWidth);
+            } else {
+              //大于 0 不显示滚动条
+              _this7.table.contentTableHeader.style.overflowX = 'hidden';
+              _this7.optTableMargin(_this7.table.fixedLeftHeaderTable, 0);
+              _this7.optTableMargin(_this7.table.fixedRighHeadertTable, 0);
+            }
           } else {
-            //大于 0 不显示滚动条
-            _this8.table.contentTableHeader.style.overflowX = 'hidden';
-            _this8.optTableMargin(_this8.table.fixedLeftHeaderTable, 0);
-            _this8.optTableMargin(_this8.table.fixedRighHeadertTable, 0);
+            if (showScroll < 0) {
+              _this7.table.tableBody.style.overflowX = 'auto';
+              _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 {
+              _this7.table.tableBody.style.overflowX = 'hidden';
+              _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 {
-          if (showScroll < 0) {
-            _this8.table.tableBody.style.overflowX = 'auto';
-            _this8.optTableMargin(_this8.table.fixedLeftBodyTable, '-' + scrollbarWidth);
-            _this8.optTableMargin(_this8.table.fixedRightBodyTable, '-' + scrollbarWidth);
-            _this8.optTableScroll(_this8.table.fixedLeftBodyTable, { x: 'scroll' });
-            _this8.optTableScroll(_this8.table.fixedRightBodyTable, { x: 'scroll' });
+        } else if (_this7.drag.fixedType) {
+          if (_this7.table.ths[_this7.drag.currIndex]) {
+            _this7.table.ths[_this7.drag.currIndex].width = newWidth;
+          }
+          // console.log('this.drag.contentTableML',this.drag.contentTableML,'diff',diff);
+          // debugger
+
+          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';
-            _this8.optTableMargin(_this8.table.fixedLeftBodyTable, 0);
-            _this8.optTableMargin(_this8.table.fixedRightBodyTable, 0);
-            _this8.optTableScroll(_this8.table.fixedLeftBodyTable, { x: 'auto' });
-            _this8.optTableScroll(_this8.table.fixedRightBodyTable, { x: 'auto' });
+            contentTablePar.style.marginRight = _this7.drag.contentTableMR + diff + 'px';
           }
         }
       } 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.onTrMouseUp = function (e) {
     var event = _utils.Event.getEvent(e);
-    var width = _this8.drag.newWidth;
-    var opt = _this8.drag.option;
-    _this8.mouseClear();
+    var width = _this7.drag.newWidth;
+    var opt = _this7.drag.option;
+    _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;
-    _this8.mouseClear();
+    if (!_this7.drag || !_this7.drag.option) return;
+    _this7.mouseClear();
   };
 
   this.optTableMargin = function (table, scrollbarWidth) {
@@ -790,31 +868,31 @@ var _initialiseProps = function _initialiseProps() {
   };
 
   this.onDragStart = function (e) {
-    if (!_this8.props.draggable) return;
-    if (_this8.drag && _this8.drag.option != 'dragAble') {
+    if (!_this7.props.draggable) return;
+    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 +901,34 @@ var _initialiseProps = function _initialiseProps() {
   };
 
   this.onDrop = function (e) {
-    if (!_this8.props.draggable) return;
-    var props = _this8.getCurrentEventData(_this8._dragCurrent);
+    if (!_this7.props.draggable) return;
+    var props = _this7.getCurrentEventData(_this7._dragCurrent);
     e.column = { props: props };
-    if (_this8.drag && _this8.drag.option != 'dragAble') {
-      _this8.props.onDrop(e);
+    if (_this7.drag && _this7.drag.option != 'dragAble') {
+      _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 +939,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 (!_this8.props.onDragEnd) return;
-    _this8.props.onDragEnd(event, { dragSource: _this8.currentObj, dragTarg: data });
+    if (!_this7.currentObj || _this7.currentObj.key == data.key) return;
+    if (!_this7.props.onDragEnd) return;
+    _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 +964,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 +972,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 +980,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 +995,8 @@ var _initialiseProps = function _initialiseProps() {
           , clsPrefix: clsPrefix //css前缀
           , className: clsPrefix + " filter-text",
           dataIndex: dataIndex //字段
-          , onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this8.handlerFilterChange) //输入框回调
-          , onFilterClear: _this8.handlerFilterClear //清除回调
+          , onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this7.handlerFilterChange) //输入框回调
+          , onFilterClear: _this7.handlerFilterClear //清除回调
           , filterDropdown: rows[1][index]["filterdropdown"] //是否显示下拉条件
           , filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
           , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@@ -931,8 +1009,8 @@ var _initialiseProps = function _initialiseProps() {
           clsPrefix: clsPrefix,
           className: clsPrefix + " filter-text",
           dataIndex: dataIndex //字段
-          , onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this8.handlerFilterChange) //输入框回调并且函数防抖动
-          , onFilterClear: _this8.handlerFilterClear //清除回调
+          , onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this7.handlerFilterChange) //输入框回调并且函数防抖动
+          , onFilterClear: _this7.handlerFilterClear //清除回调
           , filterDropdown: rows[1][index]["filterdropdown"],
           filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
           , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@@ -966,8 +1044,8 @@ var _initialiseProps = function _initialiseProps() {
           data: selectDataSource,
           notFoundContent: "Loading" //没有数据显示的默认字
           , dataIndex: dataIndex //字段
-          , onFilterChange: _this8.handlerFilterChange //输入框回调
-          , onFilterClear: _this8.handlerFilterClear //清除回调
+          , onFilterChange: _this7.handlerFilterChange //输入框回调
+          , onFilterClear: _this7.handlerFilterClear //清除回调
           , filterDropdown: rows[1][index]["filterdropdown"],
           onFocus: rows[1][index]["filterdropdownfocus"],
           filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
@@ -982,8 +1060,8 @@ var _initialiseProps = function _initialiseProps() {
           onClick: function onClick() {},
           format: rows[1][index]["format"] || "YYYY-MM-DD",
           dataIndex: dataIndex //字段
-          , onFilterChange: _this8.handlerFilterChange //输入框回调
-          , onFilterClear: _this8.handlerFilterClear //清除回调
+          , onFilterChange: _this7.handlerFilterChange //输入框回调
+          , onFilterClear: _this7.handlerFilterClear //清除回调
           , filterDropdown: rows[1][index]["filterdropdown"],
           filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
           , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@@ -997,8 +1075,8 @@ var _initialiseProps = function _initialiseProps() {
           onClick: function onClick() {},
           format: rows[1][index]["format"] || "YYYY",
           dataIndex: dataIndex //字段
-          , onFilterChange: _this8.handlerFilterChange //输入框回调
-          , onFilterClear: _this8.handlerFilterClear //清除回调
+          , onFilterChange: _this7.handlerFilterChange //输入框回调
+          , onFilterClear: _this7.handlerFilterClear //清除回调
           , filterDropdown: rows[1][index]["filterdropdown"],
           filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
           , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@@ -1012,8 +1090,8 @@ var _initialiseProps = function _initialiseProps() {
           onClick: function onClick() {},
           format: rows[1][index]["format"] || "YYYY-MM",
           dataIndex: dataIndex //字段
-          , onFilterChange: _this8.handlerFilterChange //输入框回调
-          , onFilterClear: _this8.handlerFilterClear //清除回调
+          , onFilterChange: _this7.handlerFilterChange //输入框回调
+          , onFilterClear: _this7.handlerFilterClear //清除回调
           , filterDropdown: rows[1][index]["filterdropdown"],
           filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
           , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@@ -1027,8 +1105,8 @@ var _initialiseProps = function _initialiseProps() {
           onClick: function onClick() {},
           format: rows[1][index]["format"] || "YYYY-Wo",
           dataIndex: dataIndex //字段
-          , onFilterChange: _this8.handlerFilterChange //输入框回调
-          , onFilterClear: _this8.handlerFilterClear //清除回调
+          , onFilterChange: _this7.handlerFilterChange //输入框回调
+          , onFilterClear: _this7.handlerFilterClear //清除回调
           , filterDropdown: rows[1][index]["filterdropdown"],
           filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
           , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@@ -1042,8 +1120,8 @@ var _initialiseProps = function _initialiseProps() {
           onClick: function onClick() {},
           format: rows[1][index]["format"] || "YYYY-MM-DD",
           dataIndex: dataIndex //字段
-          , onFilterChange: _this8.handlerFilterChange //输入框回调
-          , onFilterClear: _this8.handlerFilterClear //清除回调
+          , onFilterChange: _this7.handlerFilterChange //输入框回调
+          , onFilterClear: _this7.handlerFilterClear //清除回调
           , filterDropdown: rows[1][index]["filterdropdown"],
           filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
           , filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
@@ -1055,8 +1133,8 @@ var _initialiseProps = function _initialiseProps() {
   };
 
   this.onCopy = function (data, index, event) {
-    if (_this8.props.onCopy) {
-      _this8.props.onCopy(_extends(data, { col: index }), event);
+    if (_this7.props.onCopy) {
+      _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,
-          contentTable = _this$props.contentTable,
-          index = _this$props.index;
+      var _this$props2 = _this.props,
+          contentTable = _this$props2.contentTable,
+          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);
       }
     };
 
@@ -678,7 +691,8 @@ 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
       },

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;

dist/demo.css

@@ -452,8 +452,8 @@
     color: rgb(33, 33, 33);
     background-clip: padding-box;
     -webkit-user-select: none;
-    /*
-        Introduced in IE 10. 
+    /*
+        Introduced in IE 10. 
       */
     -ms-user-select: none;
     user-select: none; }

package.json

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

src/Table.js

@@ -178,6 +178,7 @@ class Table extends Component {
     this.leftColumnsLength  //左侧固定列的长度
     this.centerColumnsLength  //非固定列的长度
     this.columnsChildrenList = [];//复杂表头、所有叶子节点
+    this.dataChanged = false; // 数据是否改变
   }
   componentWillMount() {
     this.centerColumnsLength = this.columnManager.centerColumns().length
@@ -209,6 +210,7 @@ class Table extends Component {
   componentWillReceiveProps(nextProps) {
     let { hideDragHandle, rowDraggAble, showRowNum } = this.props;
     if ('data' in nextProps) {
+      this.dataChanged = JSON.stringify(this.props.data) !== JSON.stringify(nextProps.data)
       this.setState({
         data: nextProps.data,
       });
@@ -276,15 +278,49 @@ 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)
-      if (distance < 0) {
-        this.bodyTable.scrollTop = 0
+      const bodyScrollTop = this.bodyTable.scrollTop
+      if (bodyScrollTop === 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';
+        } else {
+          this.bodyTable.style.overflowX = 'hidden';
+        }
+      }
+    }
+    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() {
@@ -757,7 +793,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;
@@ -995,7 +1031,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 +1043,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 {
+          innerBodyStyle.overflowX = 'hidden';
+        }
       } else {
         bodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
       }
@@ -1040,7 +1081,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{
@@ -1093,7 +1136,6 @@ class Table extends Component {
     };
 
     let headTable;
-
     if (useFixedHeader) {
       headTable = (
         <div
@@ -1112,14 +1154,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 +1183,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="scroll-dom" style={{height:`${this.scrollbarWidth}px`}}></div> */}
+            <div className="fixed-scroll-container" ref={refName} style={{...innerBodyStyle}} onScroll={this.handleBodyScroll}>
+              {renderTable(!useFixedHeader)}
+            </div>
           </div>
         </div>
       );
@@ -1218,6 +1261,17 @@ 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
+  };
+
   syncFixedTableRowHeight() {
     //this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题
     const { clsPrefix, height, headerHeight,columns,heightConsistent, bodyDisplayInRow } = this.props;
@@ -1226,8 +1280,9 @@ class Table extends Component {
       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 rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll(`.${clsPrefix}-row`) || [];
+    const leftBodyRows = !this.dataChanged && this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.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,12 +1291,20 @@ 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)){

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 ;