fix:拖拽列宽，滚动条动态改变；fix:两个滚动条联动bug；fix:拖拽追后一列超出内容隐藏

build/Table.js

@@ -911,7 +911,7 @@ var Table = function (_Component) {
         //显示表头滚动条
         if (headerScroll) {
           if (fixed) {
-            //内容少，不用显示滚动条
+
             if (this.domWidthDiff <= 0) {
               headStyle.marginBottom = scrollbarWidth + 'px';
               bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
@@ -1179,7 +1179,7 @@ var Table = function (_Component) {
     // Prevent scrollTop setter trigger onScroll event
     // http://stackoverflow.com/q/1386696
 
-    if (e.target !== this.scrollTarget && this.scrollTarget !== headTable) {
+    if (e.currentTarget !== e.target) {
       return;
     }
     if (e.target.scrollLeft !== this.lastScrollLeft) {

build/TableHeader.js

@@ -96,6 +96,7 @@ var TableHeader = function (_Component) {
             contentTableHeader.style.overflowX = 'scroll';
             fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
             fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
+            //todo inner scroll-x去掉；outer marginbottom 设置成-15px】
           } else {
             contentTableHeader.style.overflowX = 'hidden';
             fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = '0px');

dist/demo.css

@@ -8640,8 +8640,6 @@ ul {
   .u-table td {
     padding: 12px 8px;
     word-break: break-all; }
-  .u-table tr th:last-child {
-    overflow: hidden; }
   .u-table tr.filterable th {
     padding-top: 4px;
     padding-bottom: 4px; }
@@ -8662,6 +8660,8 @@ ul {
   .u-table-bordered td {
     border-right: 1px solid rgb(233,233,233);
     box-sizing: border-box; }
+  .u-table-drag-border tr th.th-can-not-drag {
+    overflow: hidden; }
   .u-table-header {
     overflow: hidden;
     background: rgb(247,247,247);

dist/demo.js

@@ -11001,8 +11001,7 @@
 	  syncHover: true,
 	  setRowHeight: function setRowHeight() {},
 	  setRowParentIndex: function setRowParentIndex() {},
-	  tabIndex: '0',
+	  tabIndex: '0'
-	  noExpandedRowKeys: []
 	};
 	
 	var Table = function (_Component) {
@@ -11586,11 +11585,6 @@
 	      if (rootIndex == -1) {
 	        index = i + lazyParentIndex;
 	      }
-	      var noexpandable = void 0;
-	      if (props.noExpandedRowKeys.indexOf(key) >= 0) {
-	        noexpandable = true;
-	        isHiddenExpandIcon = true;
-	      }
 	      rst.push(_react2['default'].createElement(_TableRow2['default'], _extends({
 	        indent: indent,
 	        indentSize: props.indentSize,
@@ -11603,7 +11597,7 @@
 	        visible: visible,
 	        expandRowByClick: expandRowByClick,
 	        onExpand: this.onExpanded,
-	        expandable: !noexpandable && (childrenColumn || expandedRowRender),
+	        expandable: childrenColumn || expandedRowRender,
 	        expanded: isRowExpanded,
 	        clsPrefix: props.clsPrefix + '-row',
 	        childrenColumnName: childrenColumnName,
@@ -12036,7 +12030,7 @@
 	    // Prevent scrollTop setter trigger onScroll event
 	    // http://stackoverflow.com/q/1386696
 	
-	    if (e.target !== this.scrollTarget && this.scrollTarget !== headTable) {
+	    if (e.currentTarget !== e.target) {
 	      return;
 	    }
 	    if (e.target.scrollLeft !== this.lastScrollLeft) {
@@ -13167,6 +13161,24 @@
 	
 	    var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 	
+	    _this.optTableMargin = function (table, scrollbarWidth) {
+	      if (table) {
+	        table.style.marginBottom = scrollbarWidth + "px";
+	      }
+	    };
+	
+	    _this.optTableScroll = function (table) {
+	      var overflow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+	
+	      if (table) {
+	        var innerTable = table.querySelector('.u-table-body-inner');
+	        if (innerTable) {
+	          overflow.x && (innerTable.style.overflowX = overflow.x);
+	          overflow.y && (innerTable.style.overflowY = overflow.y);
+	        }
+	      }
+	    };
+	
 	    _this.onLineMouseMove = function (e) {
 	      var _this$props = _this.props,
 	          clsPrefix = _this$props.clsPrefix,
@@ -13194,30 +13206,43 @@
 	        if (_this.fixedTable.cols) {
 	          _this.fixedTable.cols[_this.drag.currIndex].style.width = newWidth + "px";
 	        }
+	        var oldTableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth);
+	        var newTableWidth = oldTableWidth + diff;
+	        _this.table.table.style.width = newTableWidth; //改变table的width
+	
+	        var showScroll = contentDomWidth - newTableWidth - scrollbarWidth;
+	        var fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
+	        var fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
+	        var contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
+	        var fixedLeftBodyTable = contentTable.querySelector('.u-table-fixed-left .u-table-body-outer');
+	        var fixedRightBodyTable = contentTable.querySelector('.u-table-fixed-right .u-table-body-outer');
 	
 	        //表头滚动条处理
 	        if (headerScroll) {
-	          var oldTableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth);
-	          var newTableWidth = oldTableWidth + diff;
-	          _this.table.table.style.width = newTableWidth; //改变table的width
-	
-	          var showScroll = contentDomWidth - newTableWidth - scrollbarWidth;
-	          // if(bordered){
-	          //     showScroll = showScroll -1;
-	          // }
-	          var fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
-	          var fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
-	          var contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
 	          if (showScroll < 0) {
 	            //找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
 	            contentTableHeader.style.overflowX = 'scroll';
-	            fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
+	            _this.optTableMargin(fixedLeftHeaderTable, scrollbarWidth);
-	            fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
+	            _this.optTableMargin(fixedRighHeadertTable, scrollbarWidth);
+	            // fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
+	            // fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
 	            //todo inner scroll-x去掉；outer marginbottom 设置成-15px】
 	          } else {
 	            contentTableHeader.style.overflowX = 'hidden';
-	            fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = '0px');
+	            _this.optTableMargin(fixedLeftHeaderTable, 0);
-	            fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = '0px');
+	            _this.optTableMargin(fixedRighHeadertTable, 0);
+	          }
+	        } else {
+	          if (showScroll < 0) {
+	            _this.optTableMargin(fixedLeftBodyTable, '-' + scrollbarWidth);
+	            _this.optTableMargin(fixedRightBodyTable, '-' + scrollbarWidth);
+	            _this.optTableScroll(fixedLeftBodyTable, { x: 'scroll' });
+	            _this.optTableScroll(fixedRightBodyTable, { x: 'scroll' });
+	          } else {
+	            _this.optTableMargin(fixedLeftBodyTable, 0);
+	            _this.optTableMargin(fixedRightBodyTable, 0);
+	            _this.optTableScroll(fixedLeftBodyTable, { x: 'auto' });
+	            _this.optTableScroll(fixedRightBodyTable, { x: 'auto' });
 	          }
 	        }
 	      }
@@ -13577,6 +13602,12 @@
 	      }
 	    }
 	  };
+	  /**
+	   *相关滚动条联动操作
+	   *
+	   * @memberof TableHeader
+	   */
+	
 	
 	  /**
 	   * 调整列宽的move事件

src/Table.js

@@ -84,8 +84,7 @@ const defaultProps = {
   syncHover: true,
   setRowHeight:()=>{},
   setRowParentIndex:()=>{},
-  tabIndex:'0',
+  tabIndex:'0'
-  noExpandedRowKeys:[]
 };
 
 class Table extends Component {
@@ -594,11 +593,6 @@ class Table extends Component {
       if(rootIndex ==-1){
         index = i+lazyParentIndex
       }
-      let noexpandable;
-      if(props.noExpandedRowKeys.indexOf(key) >= 0){
-        noexpandable = true;
-        isHiddenExpandIcon = true;
-      }
       rst.push(
         <TableRow
           indent={indent}
@@ -612,7 +606,7 @@ class Table extends Component {
           visible={visible}
           expandRowByClick={expandRowByClick}
           onExpand={this.onExpanded}
-          expandable={!noexpandable && (childrenColumn || expandedRowRender)}
+          expandable={childrenColumn || expandedRowRender}
           expanded={isRowExpanded}
           clsPrefix={`${props.clsPrefix}-row`}
           childrenColumnName={childrenColumnName}
@@ -1014,7 +1008,7 @@ class Table extends Component {
     const { headTable, bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this.refs;
     // Prevent scrollTop setter trigger onScroll event
     // http://stackoverflow.com/q/1386696
-    if (e.target !== this.scrollTarget && this.scrollTarget !== headTable) {
+    if (e.currentTarget !== e.target) {
       return;
     }
     if (e.target.scrollLeft !== this.lastScrollLeft) {

src/Table.scss

@@ -97,9 +97,7 @@ $checkbox-height:16px;
     word-break: break-all;
   }
   tr {
-    th:last-child{ //拖拽tag影响了表格整体宽度
+    
-      overflow: hidden;
-    }
     &.filterable{
       th{
         padding-top: 4px;
@@ -134,6 +132,13 @@ $checkbox-height:16px;
       box-sizing: border-box;
     }
   }
+  &-drag-border{
+    tr {
+      th.th-can-not-drag{ //拖拽tag影响了表格整体宽度
+        overflow: hidden;
+      }
+    }
+  }
   &-header {
     overflow: hidden;
     background: $table-head-background-color;

src/TableHeader.js

@@ -157,7 +157,31 @@ class TableHeader extends Component {
       }
     }
   }
-  
+  /**
+   *相关滚动条联动操作
+   *
+   * @memberof TableHeader
+   */
+  optTableMargin =(table,scrollbarWidth)=>{
+    if(table){
+      table.style.marginBottom = scrollbarWidth + "px"
+    }
+  }
+
+  optTableScroll = (table,overflow ={})=>{
+    if(table){
+      const innerTable = table.querySelector('.u-table-body-inner');
+      if(innerTable){
+        overflow.x && (innerTable.style.overflowX = overflow.x);
+        overflow.y && (innerTable.style.overflowY = overflow.y);
+      }
+     
+    }
+  }
+
+
+
+
   /**
    * 调整列宽的move事件
    * @memberof TableHeader
@@ -182,31 +206,44 @@ class TableHeader extends Component {
         if(this.fixedTable.cols){
             this.fixedTable.cols[this.drag.currIndex].style.width = newWidth + "px";
         }
+        let oldTableWidth = parseInt(this.table.table.style.width ?this.table.table.style.width:this.table.table.scrollWidth);
+        const newTableWidth = oldTableWidth + diff ;
+        this.table.table.style.width  = newTableWidth;//改变table的width
 
+        let showScroll =  contentDomWidth - newTableWidth - scrollbarWidth ;
+        const fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
+        const fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
+        const contentTableHeader  = contentTable.querySelector('.u-table-scroll .u-table-header');
+        const fixedLeftBodyTable = contentTable.querySelector('.u-table-fixed-left .u-table-body-outer') ;
+        const fixedRightBodyTable = contentTable.querySelector('.u-table-fixed-right .u-table-body-outer') ;
+       
         //表头滚动条处理
         if(headerScroll){
-            let oldTableWidth = parseInt(this.table.table.style.width ?this.table.table.style.width:this.table.table.scrollWidth);
-            const newTableWidth = oldTableWidth + diff ;
-            this.table.table.style.width  = newTableWidth;//改变table的width
-
-            let showScroll =  contentDomWidth - newTableWidth - scrollbarWidth ;
-            // if(bordered){
-            //     showScroll = showScroll -1;
-            // }
-            const fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
-            const fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
-            const contentTableHeader  = contentTable.querySelector('.u-table-scroll .u-table-header');
             if(showScroll < 0){
                 //找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
                 contentTableHeader.style.overflowX = 'scroll';
-                fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
+               this.optTableMargin(fixedLeftHeaderTable,scrollbarWidth);
-                fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
+               this.optTableMargin(fixedRighHeadertTable,scrollbarWidth);
+                // fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
+                // fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
               //todo inner scroll-x去掉；outer marginbottom 设置成-15px】
               }else{
                 contentTableHeader.style.overflowX = 'hidden';
-                fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = '0px');
+                this.optTableMargin(fixedLeftHeaderTable,0);
-                fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = '0px');
+               this.optTableMargin(fixedRighHeadertTable,0);
             }
+        }else{
+          if(showScroll < 0){
+               this.optTableMargin(fixedLeftBodyTable,'-'+scrollbarWidth);
+               this.optTableMargin(fixedRightBodyTable,'-'+scrollbarWidth);
+               this.optTableScroll(fixedLeftBodyTable,{x:'scroll'});
+               this.optTableScroll(fixedRightBodyTable,{x:'scroll'});
+          }else{
+            this.optTableMargin(fixedLeftBodyTable,0);
+            this.optTableMargin(fixedRightBodyTable,0);
+            this.optTableScroll(fixedLeftBodyTable,{x:'auto'});
+               this.optTableScroll(fixedRightBodyTable,{x:'auto'});
+          }
         }
         
       }