拖拽兼容横向滚动条

build/Table.js

@@ -383,7 +383,9 @@ var Table = function (_Component) {
         dragborderKey = _props.dragborderKey,
         minColumnWidth = _props.minColumnWidth,
         headerHeight = _props.headerHeight,
-        afterDragColWidth = _props.afterDragColWidth;
+        afterDragColWidth = _props.afterDragColWidth,
+        headerScroll = _props.headerScroll,
+        bordered = _props.bordered;
 
     var rows = this.getHeaderRows(columns);
     if (expandIconAsCell && fixed !== 'right') {
@@ -418,7 +420,11 @@ var Table = function (_Component) {
       onFilterRowsChange: onFilterRowsChange,
       onFilterRowsDropChange: onFilterRowsDropChange,
       filterDelay: filterDelay,
-      afterDragColWidth: afterDragColWidth
+      afterDragColWidth: afterDragColWidth,
+      contentDomWidth: this.contentDomWidth,
+      scrollbarWidth: this.scrollbarWidth,
+      headerScroll: headerScroll,
+      bordered: bordered
     })) : null;
   };
 

build/TableHeader.js

@@ -198,7 +198,11 @@ var TableHeader = function (_Component) {
 
       var _this$props3 = _this.props,
           dragborderKey = _this$props3.dragborderKey,
-          contentTable = _this$props3.contentTable;
+          contentTable = _this$props3.contentTable,
+          headerScroll = _this$props3.headerScroll,
+          contentDomWidth = _this$props3.contentDomWidth,
+          scrollbarWidth = _this$props3.scrollbarWidth,
+          bordered = _this$props3.bordered;
 
       var x = event.pageX - _this.drag.initPageLeftX + _this.drag.initLeft - 0;
       var contentTableDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).parentNode;
@@ -262,6 +266,26 @@ var TableHeader = function (_Component) {
         colDomArr[_this.drag.currIndex].style.width = newWidth + "px";
         //4、设置overflow属性
       }
+
+      //表头需要显示滚动条时，需兼容含有固定列
+      if (headerScroll) {
+
+        var showScroll = contentDomWidth - newTableWidth - scrollbarWidth;
+        if (bordered) {
+          showScroll = showScroll - 1;
+        }
+        var fixedLeftTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
+        var fixedRightTable = contentTable.querySelector('.u-table-fixed-rigth .u-table-header');
+        if (showScroll < 0) {
+          //找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
+
+          fixedLeftTable && (fixedLeftTable.style.marginBottom = scrollbarWidth + "px");
+          fixedRightTable && (fixedRightTable.style.marginBottom = scrollbarWidth + "px");
+        } else {
+          fixedLeftTable && (fixedLeftTable.style.marginBottom = '0px');
+          fixedRightTable && (fixedRightTable.style.marginBottom = '0px');
+        }
+      }
     };
 
     _this.handlerFilterTextChange = function (key, val) {

demo/demolist/Demo1.js

@@ -28,7 +28,7 @@ const columns = [
       );
     }
   },
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: '10%' },
+  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 1000 },
   { title: "年龄", dataIndex: "c", key: "c", width: 200 },
   {
     title: "操作",
@@ -77,6 +77,7 @@ class Demo1 extends Component {
           parentNodeId='parent'
           height={43}
           headerHeight={42}
+          dragborder={true}
           onRowClick={(record, index, indent) => {
             this.setState({
               selectedRowIndex: index

src/Table.js

@@ -294,7 +294,7 @@ class Table extends Component {
 
   getHeader(columns, fixed) {
     const { filterDelay, onFilterRowsDropChange, onFilterRowsChange, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
-      onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth } = this.props;
+      onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered} = this.props;
     const rows = this.getHeaderRows(columns);
     if (expandIconAsCell && fixed !== 'right') {
       rows[0].unshift({
@@ -332,6 +332,10 @@ class Table extends Component {
         onFilterRowsDropChange={onFilterRowsDropChange}
         filterDelay={filterDelay}
         afterDragColWidth = {afterDragColWidth}
+        contentDomWidth={this.contentDomWidth}
+        scrollbarWidth = {this.scrollbarWidth}
+        headerScroll = {headerScroll}
+        bordered = {bordered}
       />
     ) : null;
   }

src/TableHeader.js

@@ -204,7 +204,7 @@ class TableHeader extends Component {
     if (!this.border) return;
     //固定表头拖拽
 
-    const { dragborderKey, contentTable } = this.props;
+    const { dragborderKey, contentTable,headerScroll ,contentDomWidth,scrollbarWidth,bordered} = this.props;
     let x = event.pageX - this.drag.initPageLeftX + this.drag.initLeft - 0;
     let contentTableDom = document.getElementById(
       "u-table-drag-thead-" + this.theadKey
@@ -276,6 +276,26 @@ class TableHeader extends Component {
       colDomArr[this.drag.currIndex].style.width = newWidth + "px";
       //4、设置overflow属性
     }
+
+    //表头需要显示滚动条时，需兼容含有固定列
+    if(headerScroll){
+
+      let showScroll =  contentDomWidth - newTableWidth - scrollbarWidth ;
+      if(bordered){
+        showScroll = showScroll -1;
+      }
+      const fixedLeftTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
+      const fixedRightTable = contentTable.querySelector('.u-table-fixed-rigth .u-table-header');
+      if(showScroll < 0){
+        //找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
+  
+        fixedLeftTable && (fixedLeftTable.style.marginBottom = scrollbarWidth + "px");
+        fixedRightTable && (fixedRightTable.style.marginBottom = scrollbarWidth + "px");
+      }else{
+        fixedLeftTable && (fixedLeftTable.style.marginBottom = '0px');
+        fixedRightTable && (fixedRightTable.style.marginBottom = '0px');
+      }
+    }
   };
 
   /**