fix:解决嵌套表格展示错行、拖拽过程中错行问题

build/Table.js

@@ -553,7 +553,7 @@ var Table = function (_Component) {
     return this.props.expandedRowKeys || this.state.expandedRowKeys;
   };
 
-  Table.prototype.getHeader = function getHeader(columns, fixed) {
+  Table.prototype.getHeader = function getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
     var _props = this.props,
         filterDelay = _props.filterDelay,
         onFilterChange = _props.onFilterChange,
@@ -618,7 +618,9 @@ var Table = function (_Component) {
       contentDomWidth: this.contentDomWidth,
       scrollbarWidth: this.scrollbarWidth,
       headerScroll: headerScroll,
-      bordered: bordered
+      bordered: bordered,
+      leftFixedWidth: leftFixedWidth,
+      rightFixedWidth: rightFixedWidth
     })) : null;
   };
 
@@ -1041,6 +1043,8 @@ var Table = function (_Component) {
     var bodyStyle = _extends({}, this.props.bodyStyle);
     var headStyle = {};
     var innerBodyStyle = {};
+    var leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
+    var rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
 
     var tableClassName = '';
     //表格元素的宽度大于容器的宽度也显示滚动条
@@ -1093,7 +1097,7 @@ var Table = function (_Component) {
           if (fixed) {
             if (this.domWidthDiff > 0) {
               headStyle.overflow = 'hidden';
-              // innerBodyStyle.overflowX = 'auto'; //兼容expand场景、子表格含有固定列的场景
+              innerBodyStyle.overflowX = 'scroll'; //兼容expand场景、子表格含有固定列的场景
             } else {
               bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
             }
@@ -1141,7 +1145,7 @@ var Table = function (_Component) {
         'table',
         { className: ' ' + tableClassName + '  table-bordered ' + _drag_class + ' ', style: tableStyle },
         _this4.getColGroup(columns, fixed),
-        hasHead ? _this4.getHeader(columns, fixed) : null,
+        hasHead ? _this4.getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) : null,
         tableBody
       );
     };
@@ -1210,8 +1214,8 @@ var Table = function (_Component) {
         )
       );
     }
-    var leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
+    // const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
-    var rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
+    // const rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
     var expandIconWidth = expandIconAsCell ? 33 : 0;
     var parStyle = {};
     if (!fixed) {

build/TableHeader.js

@@ -157,7 +157,9 @@ var TableHeader = function (_Component) {
           contentTable = _this$props2.contentTable,
           headerScroll = _this$props2.headerScroll,
           lastShowIndex = _this$props2.lastShowIndex,
-          onDraggingBorder = _this$props2.onDraggingBorder;
+          onDraggingBorder = _this$props2.onDraggingBorder,
+          leftFixedWidth = _this$props2.leftFixedWidth,
+          rightFixedWidth = _this$props2.rightFixedWidth;
 
       _utils.Event.stopPropagation(e);
       var event = _utils.Event.getEvent(e);
@@ -189,11 +191,11 @@ var TableHeader = function (_Component) {
             _this.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头
             _this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体
           }
-
+          var showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (_this.drag.tableWidth + diff) - scrollbarWidth;
-          var showScroll = contentDomWidth - (_this.drag.tableWidth + diff) - scrollbarWidth;
           //表头滚动条处理
           if (headerScroll) {
             if (showScroll < 0) {
+              //小于 0 出现滚动条
               //找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
               _this.table.contentTableHeader.style.overflowX = 'scroll';
               _this.optTableMargin(_this.table.fixedLeftHeaderTable, scrollbarWidth);
@@ -202,17 +204,20 @@ var TableHeader = function (_Component) {
               // fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
               //todo inner scroll-x去掉；outer marginbottom 设置成-15px】
             } else {
+              //大于 0 不显示滚动条
               _this.table.contentTableHeader.style.overflowX = 'hidden';
               _this.optTableMargin(_this.table.fixedLeftHeaderTable, 0);
               _this.optTableMargin(_this.table.fixedRighHeadertTable, 0);
             }
           } else {
             if (showScroll < 0) {
+              _this.table.tableBody.style.overflowX = 'auto';
               _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';
               _this.optTableMargin(_this.table.fixedLeftBodyTable, 0);
               _this.optTableMargin(_this.table.fixedRightBodyTable, 0);
               _this.optTableScroll(_this.table.fixedLeftBodyTable, { x: 'auto' });
@@ -263,7 +268,7 @@ var TableHeader = function (_Component) {
         var innerTable = table.querySelector('.u-table-body-inner');
         if (innerTable) {
           //fixbug: 拖拽列宽后，滚动条滚到表格底部，会导致固定列和非固定列错行
-          // overflow.x && (innerTable.style.overflowX = overflow.x);
+          overflow.x && (innerTable.style.overflowX = overflow.x);
           overflow.y && (innerTable.style.overflowY = overflow.y);
         }
       }
@@ -531,6 +536,7 @@ var TableHeader = function (_Component) {
       table.cols = tableDome.getElementsByTagName("col");
       table.ths = tableDome.getElementsByTagName("th");
       table.tr = tableDome.getElementsByTagName("tr");
+      table.tableBody = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body');
       table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
     }
 

demo/demolist/Demo0602.js

@@ -18,6 +18,7 @@ const columns = [
         dataIndex: "index",
         key: "index",
         width: 80, 
+        fixed: 'left',
         render(text, record, index){return index + 1}
     },
     {
@@ -131,12 +132,48 @@ const data = [
       confirmState_name:"终止",
       closeState_name:"已关闭",
       key: "3"
+    },
+    { 
+        orderCode:"NU0391025", 
+        supplierName: "xx供应商",
+        type_name: "1",
+        purchasing:'组织c', 
+        purchasingGroup:"aa",
+        voucherDate:"2018年03月18日",
+        approvalState_name:"已审批",
+        confirmState_name:"执行中",
+        closeState_name:"未关闭",
+        key: "4"
+      }, 
+      { 
+        orderCode:"NU0391026", 
+        supplierName: "xx供应商",
+        type_name: "2",
+        purchasing:'组织a', 
+        purchasingGroup:"bb",
+        voucherDate:"2018年02月05日",
+        approvalState_name:"已审批",
+        confirmState_name:"待确认",
+        closeState_name:"未关闭",
+        key: "5"
+      },
+      { 
+        orderCode:"NU0391027", 
+        supplierName: "xx供应商",
+        type_name: "3",
+        purchasing:'组织b', 
+        purchasingGroup:"aa",
+        voucherDate:"2018年07月01日",
+        approvalState_name:"已审批",
+        confirmState_name:"终止",
+        closeState_name:"已关闭",
+        key: "6"
       }
 ];
 
 class Demo52 extends Component {
   render() {
-    return <Table columns={columns} data={data} scroll={{ x:'110%', y: 200 }}  />;
+    return <Table columns={columns} data={data} dragborder={true} scroll={{ y: 200 }}  />;
   }
 }
 

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "2.1.13",
+ "version": "2.1.14-beta.2",
  "description": "Table ui component for react",
  "keywords": [
   "react",

src/Table.js

@@ -394,7 +394,7 @@ class Table extends Component {
     return this.props.expandedRowKeys || this.state.expandedRowKeys;
   }
 
-  getHeader(columns, fixed) {
+  getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
     const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
       onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder,onDraggingBorder} = this.props;
     const rows = this.getHeaderRows(columns);
@@ -438,6 +438,8 @@ class Table extends Component {
         scrollbarWidth = {this.scrollbarWidth}
         headerScroll = {headerScroll}
         bordered = {bordered}
+        leftFixedWidth = {leftFixedWidth}
+        rightFixedWidth = {rightFixedWidth}
       />
     ) : null;
   }
@@ -886,6 +888,8 @@ class Table extends Component {
     const bodyStyle = { ...this.props.bodyStyle };
     const headStyle = {};
     const innerBodyStyle = {};
+    const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
+    const rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
 
     let tableClassName = '';
     //表格元素的宽度大于容器的宽度也显示滚动条
@@ -938,7 +942,7 @@ class Table extends Component {
           if(fixed){
             if(this.domWidthDiff > 0){
               headStyle.overflow = 'hidden';
-              // innerBodyStyle.overflowX = 'auto'; //兼容expand场景、子表格含有固定列的场景
+              innerBodyStyle.overflowX = 'scroll'; //兼容expand场景、子表格含有固定列的场景
             }else{
               bodyStyle.marginBottom = `-${scrollbarWidth}px`;
             }
@@ -986,7 +990,7 @@ class Table extends Component {
         <table className={` ${tableClassName}  table-bordered ${_drag_class} `} style={tableStyle}  >
           {/* {this.props.dragborder?null:this.getColGroup(columns, fixed)} */}
           {this.getColGroup(columns, fixed)}
-          {hasHead ? this.getHeader(columns, fixed) : null}
+          {hasHead ? this.getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) : null}
           {tableBody}
         </table>
       );
@@ -1051,8 +1055,8 @@ class Table extends Component {
         </div>
       );
     }
-    const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
+    // const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
-    const rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
+    // const rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
     let expandIconWidth = expandIconAsCell ? 33 : 0;
     let parStyle = {}
     if(!fixed){

src/TableHeader.js

@@ -79,6 +79,7 @@ class TableHeader extends Component {
       table.cols = tableDome.getElementsByTagName("col");
       table.ths = tableDome.getElementsByTagName("th");
       table.tr = tableDome.getElementsByTagName("tr");
+      table.tableBody = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body');
       table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
     }
 
@@ -277,7 +278,7 @@ class TableHeader extends Component {
    */
   onTrMouseMove = (e) => {
     if(!this.props.dragborder && !this.props.draggable)return;
-    const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex,onDraggingBorder} = this.props;
+    const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex,onDraggingBorder, leftFixedWidth, rightFixedWidth} = this.props;
     Event.stopPropagation(e);
     let event = Event.getEvent(e);
     if(this.props.dragborder && this.drag.option == "border"){
@@ -307,11 +308,10 @@ class TableHeader extends Component {
           this.table.cols[lastShowIndex].style.width = lastWidth +"px";//同步表头
           this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px";//同步表体
         }
-
+        let showScroll =  contentDomWidth - (leftFixedWidth + rightFixedWidth) - (this.drag.tableWidth + diff) - scrollbarWidth ;
-        let showScroll =  contentDomWidth - (this.drag.tableWidth + diff) - scrollbarWidth ;
         //表头滚动条处理
         if(headerScroll){
-            if(showScroll < 0){
+            if(showScroll < 0){ //小于 0 出现滚动条
                 //找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
                 this.table.contentTableHeader.style.overflowX = 'scroll';
                 this.optTableMargin( this.table.fixedLeftHeaderTable,scrollbarWidth);
@@ -319,18 +319,20 @@ class TableHeader extends Component {
                 // fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
                 // fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
               //todo inner scroll-x去掉；outer marginbottom 设置成-15px】
-              }else{
+              }else{ //大于 0 不显示滚动条
                 this.table.contentTableHeader.style.overflowX = 'hidden';
                 this.optTableMargin( this.table.fixedLeftHeaderTable,0);
                 this.optTableMargin( this.table.fixedRighHeadertTable,0);
             }
         }else{
           if(showScroll < 0){
+                this.table.tableBody.style.overflowX = 'auto';
                 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';
             this.optTableMargin( this.table.fixedLeftBodyTable,0);
             this.optTableMargin( this.table.fixedRightBodyTable,0);
             this.optTableScroll( this.table.fixedLeftBodyTable,{x:'auto'});
@@ -407,7 +409,7 @@ class TableHeader extends Component {
       const innerTable = table.querySelector('.u-table-body-inner');
       if(innerTable){
         //fixbug: 拖拽列宽后，滚动条滚到表格底部，会导致固定列和非固定列错行
-        // overflow.x && (innerTable.style.overflowX = overflow.x);
+        overflow.x && (innerTable.style.overflowX = overflow.x);
         overflow.y && (innerTable.style.overflowY = overflow.y);
       }