fix:嵌套表格，expandIconAsCell={true}时，拖拽列宽度，被调整的总是前一列

build/Table.js

@@ -200,6 +200,14 @@ var Table = function (_Component) {
     };
 
     _this.getColumnsChildrenList = function (columns) {
+      var expandIconAsCell = _this.props.expandIconAsCell;
+
+      if (expandIconAsCell) {
+        _this.columnsChildrenList.push({
+          className: "u-table-expand-icon-column",
+          key: "expand-icon"
+        });
+      }
       columns.forEach(function (da) {
         da.children ? _this.getColumnsChildrenList(da.children) : _this.columnsChildrenList.push(da);
       });
@@ -590,6 +598,7 @@ var Table = function (_Component) {
 
 
   Table.prototype.getHeader = function getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
+    var lastShowIndex = this.state.lastShowIndex;
     var _props = this.props,
         filterDelay = _props.filterDelay,
         onFilterChange = _props.onFilterChange,
@@ -641,7 +650,7 @@ var Table = function (_Component) {
       minColumnWidth: minColumnWidth,
       contentWidthDiff: contentWidthDiff,
       contentWidth: this.contentWidth,
-      lastShowIndex: this.state.lastShowIndex,
+      lastShowIndex: expandIconAsCell ? parseInt(lastShowIndex) + 1 : lastShowIndex,
       clsPrefix: clsPrefix,
       rows: rows,
       contentTable: this.contentTable,

build/TableHeader.js

@@ -552,7 +552,8 @@ var _initialiseProps = function _initialiseProps() {
     if (type == 'online' && _this7.props.dragborder) {
       if (!_this7.props.dragborder) return;
       targetEvent.setAttribute('draggable', false); //添加交换列效果
-      var currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
+      // let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
+      var currentIndex = -1;
       var defaultWidth = currentElement.getAttribute("data-th-width");
       _this7.drag.option = "border"; //拖拽操作
       if (columnsChildrenList) {
@@ -640,7 +641,6 @@ var _initialiseProps = function _initialiseProps() {
       var diff = event.x - _this7.drag.oldLeft;
       var newWidth = _this7.drag.oldWidth + diff;
       _this7.drag.newWidth = newWidth > 0 ? newWidth : _this7.minWidth;
-      // if(newWidth > this.drag.minWidth){
       if (newWidth > _this7.minWidth) {
         currentCols.style.width = newWidth + 'px';
         //hao 支持固定表头拖拽 修改表体的width
@@ -648,13 +648,6 @@ var _initialiseProps = function _initialiseProps() {
           _this7.fixedTable.cols[_this7.drag.currIndex].style.width = newWidth + "px";
         }
 
-        // const newTableWidth = this.drag.tableWidth + diff;// +'px';
-        // this.table.table.style.width  = newTableWidth+'px';;//改变table的width
-        // if(this.table.innerTableBody){//TODO 后续需要处理此处
-        //   this.table.innerTableBody.style.width  = newTableWidth+'px';
-
-        // }
-
         var newDiff = parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width);
         if (newDiff > 0) {
           //缩小
@@ -671,9 +664,6 @@ var _initialiseProps = function _initialiseProps() {
             _this7.table.contentTableHeader.style.overflowX = 'scroll';
             _this7.optTableMargin(_this7.table.fixedLeftHeaderTable, scrollbarWidth);
             _this7.optTableMargin(_this7.table.fixedRighHeadertTable, scrollbarWidth);
-            // fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
-            // fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
-            //todo inner scroll-x去掉；outer marginbottom 设置成-15px】
           } else {
             //大于 0 不显示滚动条
             _this7.table.contentTableHeader.style.overflowX = 'hidden';
@@ -698,12 +688,8 @@ var _initialiseProps = function _initialiseProps() {
       } else {
         _this7.drag.newWidth = _this7.minWidth;
       }
-    } else if (_this7.props.draggable && _this7.drag.option == "draggable") {
+    }
-      // console.log(" --onTrMouseMove--draggable- ",this.drag.option);
+    // 增加拖拽列宽动作的回调函数
-    } else {}
-      // console.log("onTrMouseMove dragborder or draggable is all false !");
-
-      // 增加拖拽列宽动作的回调函数
     _this7.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this7.drag.newWidth);
   };
 

dist/demo.js

@@ -37219,6 +37219,14 @@
 	    };
 	
 	    _this.getColumnsChildrenList = function (columns) {
+	      var expandIconAsCell = _this.props.expandIconAsCell;
+	
+	      if (expandIconAsCell) {
+	        _this.columnsChildrenList.push({
+	          className: "u-table-expand-icon-column",
+	          key: "expand-icon"
+	        });
+	      }
 	      columns.forEach(function (da) {
 	        da.children ? _this.getColumnsChildrenList(da.children) : _this.columnsChildrenList.push(da);
 	      });
@@ -37609,6 +37617,7 @@
 	
 	
 	  Table.prototype.getHeader = function getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
+	    var lastShowIndex = this.state.lastShowIndex;
 	    var _props = this.props,
 	        filterDelay = _props.filterDelay,
 	        onFilterChange = _props.onFilterChange,
@@ -37660,7 +37669,7 @@
 	      minColumnWidth: minColumnWidth,
 	      contentWidthDiff: contentWidthDiff,
 	      contentWidth: this.contentWidth,
-	      lastShowIndex: this.state.lastShowIndex,
+	      lastShowIndex: expandIconAsCell ? parseInt(lastShowIndex) + 1 : lastShowIndex,
 	      clsPrefix: clsPrefix,
 	      rows: rows,
 	      contentTable: this.contentTable,
@@ -52154,7 +52163,8 @@
 	    if (type == 'online' && _this7.props.dragborder) {
 	      if (!_this7.props.dragborder) return;
 	      targetEvent.setAttribute('draggable', false); //添加交换列效果
-	      var currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
+	      // let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
+	      var currentIndex = -1;
 	      var defaultWidth = currentElement.getAttribute("data-th-width");
 	      _this7.drag.option = "border"; //拖拽操作
 	      if (columnsChildrenList) {
@@ -52242,7 +52252,6 @@
 	      var diff = event.x - _this7.drag.oldLeft;
 	      var newWidth = _this7.drag.oldWidth + diff;
 	      _this7.drag.newWidth = newWidth > 0 ? newWidth : _this7.minWidth;
-	      // if(newWidth > this.drag.minWidth){
 	      if (newWidth > _this7.minWidth) {
 	        currentCols.style.width = newWidth + 'px';
 	        //hao 支持固定表头拖拽 修改表体的width
@@ -52250,13 +52259,6 @@
 	          _this7.fixedTable.cols[_this7.drag.currIndex].style.width = newWidth + "px";
 	        }
 	
-	        // const newTableWidth = this.drag.tableWidth + diff;// +'px';
-	        // this.table.table.style.width  = newTableWidth+'px';;//改变table的width
-	        // if(this.table.innerTableBody){//TODO 后续需要处理此处
-	        //   this.table.innerTableBody.style.width  = newTableWidth+'px';
-	
-	        // }
-	
 	        var newDiff = parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width);
 	        if (newDiff > 0) {
 	          //缩小
@@ -52273,9 +52275,6 @@
 	            _this7.table.contentTableHeader.style.overflowX = 'scroll';
 	            _this7.optTableMargin(_this7.table.fixedLeftHeaderTable, scrollbarWidth);
 	            _this7.optTableMargin(_this7.table.fixedRighHeadertTable, scrollbarWidth);
-	            // fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
-	            // fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
-	            //todo inner scroll-x去掉；outer marginbottom 设置成-15px】
 	          } else {
 	            //大于 0 不显示滚动条
 	            _this7.table.contentTableHeader.style.overflowX = 'hidden';
@@ -52300,12 +52299,8 @@
 	      } else {
 	        _this7.drag.newWidth = _this7.minWidth;
 	      }
-	    } else if (_this7.props.draggable && _this7.drag.option == "draggable") {
+	    }
-	      // console.log(" --onTrMouseMove--draggable- ",this.drag.option);
+	    // 增加拖拽列宽动作的回调函数
-	    } else {}
-	      // console.log("onTrMouseMove dragborder or draggable is all false !");
-	
-	      // 增加拖拽列宽动作的回调函数
 	    _this7.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this7.drag.newWidth);
 	  };
 	

src/Table.js

@@ -424,12 +424,20 @@ class Table extends Component {
 
   //todo 后续改进
   getColumnsChildrenList = (columns)=>{ 
+    const { expandIconAsCell } = this.props;
+    if(expandIconAsCell){
+      this.columnsChildrenList.push({
+        className: "u-table-expand-icon-column",
+        key: "expand-icon"
+      })
+    }
     columns.forEach(da=>{
       da.children?this.getColumnsChildrenList(da.children):this.columnsChildrenList.push(da);
     })
   }
 
   getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
+    const { lastShowIndex } = this.state;
     const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop,onDragEnd, draggable,
       onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder,onDraggingBorder} = this.props;
     const rows = this.getHeaderRows(columns);
@@ -458,7 +466,7 @@ class Table extends Component {
         minColumnWidth={minColumnWidth}
         contentWidthDiff={contentWidthDiff}
         contentWidth={this.contentWidth}
-        lastShowIndex={this.state.lastShowIndex}
+        lastShowIndex={expandIconAsCell ? parseInt(lastShowIndex) + 1 : lastShowIndex}
         clsPrefix={clsPrefix}
         rows={rows}
         contentTable={this.contentTable}

src/TableHeader.js

@@ -225,7 +225,8 @@ class TableHeader extends Component {
     if(type == 'online' && this.props.dragborder){
       if(!this.props.dragborder)return;
       targetEvent.setAttribute('draggable',false);//添加交换列效果
-      let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
+      // let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
+      let currentIndex = -1;
       let defaultWidth = currentElement.getAttribute("data-th-width"); 
       this.drag.option = "border";//拖拽操作
       if(columnsChildrenList){
@@ -311,7 +312,6 @@ class TableHeader extends Component {
       let diff = (event.x - this.drag.oldLeft);
       let newWidth = this.drag.oldWidth + diff;
       this.drag.newWidth = newWidth > 0 ? newWidth : this.minWidth;
-       // if(newWidth > this.drag.minWidth){
       if(newWidth > this.minWidth){
         currentCols.style.width = newWidth +'px';
         //hao 支持固定表头拖拽 修改表体的width
@@ -319,13 +319,6 @@ class TableHeader extends Component {
             this.fixedTable.cols[this.drag.currIndex].style.width = newWidth + "px";
         }
 
-        // const newTableWidth = this.drag.tableWidth + diff;// +'px';
-        // this.table.table.style.width  = newTableWidth+'px';;//改变table的width
-        // if(this.table.innerTableBody){//TODO 后续需要处理此处
-        //   this.table.innerTableBody.style.width  = newTableWidth+'px';
-
-        // }
-
         let newDiff = (parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width));
         if(newDiff > 0){//缩小
           let lastWidth = this.lastColumWidth + newDiff;
@@ -340,9 +333,6 @@ class TableHeader extends Component {
                 this.table.contentTableHeader.style.overflowX = 'scroll';
                 this.optTableMargin( this.table.fixedLeftHeaderTable,scrollbarWidth);
                 this.optTableMargin( this.table.fixedRighHeadertTable,scrollbarWidth);
-                // fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
-                // 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);
@@ -366,10 +356,6 @@ class TableHeader extends Component {
       }else {
         this.drag.newWidth = this.minWidth;
       }
-    }else if(this.props.draggable && this.drag.option == "draggable"){
-      // console.log(" --onTrMouseMove--draggable- ",this.drag.option);
-    }else{
-      // console.log("onTrMouseMove dragborder or draggable is all false !");
     }
     // 增加拖拽列宽动作的回调函数
     this.drag.newWidth && onDraggingBorder && onDraggingBorder(event, this.drag.newWidth);