fix：表格交换列后，再拖拽列宽，作用元素不对

build/ColumnManager.js

@@ -35,21 +35,7 @@ var ColumnManager = function () {
 
     _initialiseProps.call(this);
 
-    //判断是否使用行拖拽
+    columns = this.addDragHandleColumn(columns, rowDraggAble);
-    if (rowDraggAble) {
-      var dragHandleColumn = [{
-        className: "drag-handle-column",
-        title: "",
-        key: "dragHandle",
-        dataIndex: "dragHandle",
-        // fixed:"left",
-        width: 49,
-        render: function render() {
-          return _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-navmenu' });
-        }
-      }];
-      columns = dragHandleColumn.concat(columns);
-    }
     columns = this.addOrderColumn(columns, showRowNum);
     columns = this.deleteColumnNotShow(columns);
     this.columns = columns || this.normalize(elements);
@@ -57,6 +43,9 @@ var ColumnManager = function () {
     this.originWidth = originWidth;
   }
 
+  // 向数据列中添加一列:行拖拽标识
+
+
   // delete the column which does not show
 
 
@@ -341,6 +330,24 @@ var ColumnManager = function () {
 var _initialiseProps = function _initialiseProps() {
   this._cached = {};
 
+  this.addDragHandleColumn = function (columns, rowDraggAble) {
+    if (!rowDraggAble) {
+      return columns;
+    }
+    var dragHandleColumn = [{
+      className: "drag-handle-column",
+      title: "",
+      key: "dragHandle",
+      dataIndex: "dragHandle",
+      width: 49,
+      render: function render() {
+        return _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-navmenu' });
+      }
+    }];
+    columns = dragHandleColumn.concat(columns);
+    return columns;
+  };
+
   this.deleteColumnNotShow = function (columns) {
     var len = columns.length;
     for (var i = 0; i < len; i++) {

build/Table.js

@@ -201,20 +201,6 @@ var Table = function (_Component) {
       _this.contentTable.appendChild(div);
     };
 
-    _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);
-      });
-    };
-
     _this.onDragRowStart = function (currentKey) {
       var data = _this.state.data,
           currentIndex = void 0,
@@ -327,9 +313,6 @@ var Table = function (_Component) {
       expandedRowKeys = props.expandedRowKeys || props.defaultExpandedRowKeys;
     }
 
-    _this.columnsChildrenList = []; //复杂表头、所有叶子节点
-    _this.getColumnsChildrenList(props.columns); //复杂表头、所有叶子节点
-
     _this.state = {
       expandedRowKeys: expandedRowKeys,
       data: props.data,
@@ -371,6 +354,7 @@ var Table = function (_Component) {
     _this.contentTable = null;
     _this.leftColumnsLength; //左侧固定列的长度
     _this.centerColumnsLength; //非固定列的长度 
+    _this.columnsChildrenList = []; //复杂表头、所有叶子节点
     return _this;
   }
 
@@ -600,9 +584,6 @@ var Table = function (_Component) {
     return this.props.expandedRowKeys || this.state.expandedRowKeys;
   };
 
-  //todo 后续改进
-
-
   Table.prototype.getHeader = function getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
     var lastShowIndex = this.state.lastShowIndex;
     var _props = this.props,
@@ -633,6 +614,7 @@ var Table = function (_Component) {
         onDropBorder = _props.onDropBorder,
         onDraggingBorder = _props.onDraggingBorder;
 
+    this.columnsChildrenList = []; //复杂表头拖拽，重新render表头前，将其置空
     var rows = this.getHeaderRows(columns);
     if (expandIconAsCell && fixed !== 'right') {
       rows[0].unshift({
@@ -642,6 +624,10 @@ var Table = function (_Component) {
         rowSpan: rows.length,
         width: expandIconCellWidth
       });
+      this.columnsChildrenList.unshift({
+        className: "u-table-expand-icon-column",
+        key: "expand-icon"
+      });
     }
     var trStyle = headerHeight && !fixed ? { height: headerHeight } : fixed ? this.getHeaderRowStyle(columns, rows) : null;
     var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnd: onDragEnd, onDragEnter: onDragEnter, draggable: draggable } : {};
@@ -724,6 +710,8 @@ var Table = function (_Component) {
       }
       if (column.children) {
         _this2.getHeaderRows(column.children, currentRow + 1, rows);
+      } else {
+        _this2.columnsChildrenList.push(column); //复杂表头拖拽，所有叶子节点
       }
       if ('colSpan' in column) {
         cell.colSpan = column.colSpan;

build/TableHeader.js

@@ -552,7 +552,6 @@ var _initialiseProps = function _initialiseProps() {
     if (type == 'online' && _this7.props.dragborder) {
       if (!_this7.props.dragborder) return;
       targetEvent.setAttribute('draggable', false); //添加交换列效果
-      // let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
       var currentIndex = -1;
       var defaultWidth = currentElement.getAttribute("data-th-width");
       _this7.drag.option = "border"; //拖拽操作
@@ -560,11 +559,11 @@ var _initialiseProps = function _initialiseProps() {
         var columnKey = currentElement.getAttribute("data-line-key");
         if (columnKey) {
           currentIndex = columnsChildrenList.findIndex(function (da) {
-            return da.key.toLowerCase() === columnKey.toLowerCase();
+            return (da.key && da.key.toLowerCase()) === columnKey.toLowerCase();
           });
         }
       }
-      console.log("currentIndex :", currentIndex);
+      // console.log("currentIndex :",currentIndex);
       var currentObj = _this7.table.cols[currentIndex];
       _this7.drag.currIndex = currentIndex;
       _this7.drag.oldLeft = event.x;
@@ -615,7 +614,7 @@ var _initialiseProps = function _initialiseProps() {
     if (targetEvent.nodeName.toUpperCase() != "TH") {
       th = _this7.getThDome(targetEvent);
     }
-    console.log(" getTargetToTh: ", th);
+    // console.log(" getTargetToTh: ", th);
     return th;
   };
 

dist/demo.js

@@ -37238,20 +37238,6 @@
 	      _this.contentTable.appendChild(div);
 	    };
 	
-	    _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);
-	      });
-	    };
-	
 	    _this.onDragRowStart = function (currentKey) {
 	      var data = _this.state.data,
 	          currentIndex = void 0,
@@ -37364,9 +37350,6 @@
 	      expandedRowKeys = props.expandedRowKeys || props.defaultExpandedRowKeys;
 	    }
 	
-	    _this.columnsChildrenList = []; //复杂表头、所有叶子节点
-	    _this.getColumnsChildrenList(props.columns); //复杂表头、所有叶子节点
-	
 	    _this.state = {
 	      expandedRowKeys: expandedRowKeys,
 	      data: props.data,
@@ -37408,6 +37391,7 @@
 	    _this.contentTable = null;
 	    _this.leftColumnsLength; //左侧固定列的长度
 	    _this.centerColumnsLength; //非固定列的长度 
+	    _this.columnsChildrenList = []; //复杂表头、所有叶子节点
 	    return _this;
 	  }
 	
@@ -37637,9 +37621,6 @@
 	    return this.props.expandedRowKeys || this.state.expandedRowKeys;
 	  };
 	
-	  //todo 后续改进
-	
-	
 	  Table.prototype.getHeader = function getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
 	    var lastShowIndex = this.state.lastShowIndex;
 	    var _props = this.props,
@@ -37670,6 +37651,7 @@
 	        onDropBorder = _props.onDropBorder,
 	        onDraggingBorder = _props.onDraggingBorder;
 	
+	    this.columnsChildrenList = []; //复杂表头拖拽，重新render表头前，将其置空
 	    var rows = this.getHeaderRows(columns);
 	    if (expandIconAsCell && fixed !== 'right') {
 	      rows[0].unshift({
@@ -37679,6 +37661,10 @@
 	        rowSpan: rows.length,
 	        width: expandIconCellWidth
 	      });
+	      this.columnsChildrenList.unshift({
+	        className: "u-table-expand-icon-column",
+	        key: "expand-icon"
+	      });
 	    }
 	    var trStyle = headerHeight && !fixed ? { height: headerHeight } : fixed ? this.getHeaderRowStyle(columns, rows) : null;
 	    var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnd: onDragEnd, onDragEnter: onDragEnter, draggable: draggable } : {};
@@ -37761,6 +37747,8 @@
 	      }
 	      if (column.children) {
 	        _this2.getHeaderRows(column.children, currentRow + 1, rows);
+	      } else {
+	        _this2.columnsChildrenList.push(column); //复杂表头拖拽，所有叶子节点
 	      }
 	      if ('colSpan' in column) {
 	        cell.colSpan = column.colSpan;
@@ -52182,7 +52170,6 @@
 	    if (type == 'online' && _this7.props.dragborder) {
 	      if (!_this7.props.dragborder) return;
 	      targetEvent.setAttribute('draggable', false); //添加交换列效果
-	      // let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
 	      var currentIndex = -1;
 	      var defaultWidth = currentElement.getAttribute("data-th-width");
 	      _this7.drag.option = "border"; //拖拽操作
@@ -52190,11 +52177,11 @@
 	        var columnKey = currentElement.getAttribute("data-line-key");
 	        if (columnKey) {
 	          currentIndex = columnsChildrenList.findIndex(function (da) {
-	            return da.key.toLowerCase() === columnKey.toLowerCase();
+	            return (da.key && da.key.toLowerCase()) === columnKey.toLowerCase();
 	          });
 	        }
 	      }
-	      console.log("currentIndex :", currentIndex);
+	      // console.log("currentIndex :",currentIndex);
 	      var currentObj = _this7.table.cols[currentIndex];
 	      _this7.drag.currIndex = currentIndex;
 	      _this7.drag.oldLeft = event.x;
@@ -52245,7 +52232,7 @@
 	    if (targetEvent.nodeName.toUpperCase() != "TH") {
 	      th = _this7.getThDome(targetEvent);
 	    }
-	    console.log(" getTargetToTh: ", th);
+	    // console.log(" getTargetToTh: ", th);
 	    return th;
 	  };
 	
@@ -86255,21 +86242,7 @@
 	
 	    _initialiseProps.call(this);
 	
-	    //判断是否使用行拖拽
+	    columns = this.addDragHandleColumn(columns, rowDraggAble);
-	    if (rowDraggAble) {
-	      var dragHandleColumn = [{
-	        className: "drag-handle-column",
-	        title: "",
-	        key: "dragHandle",
-	        dataIndex: "dragHandle",
-	        // fixed:"left",
-	        width: 49,
-	        render: function render() {
-	          return _react2['default'].createElement(_beeIcon2['default'], { type: 'uf-navmenu' });
-	        }
-	      }];
-	      columns = dragHandleColumn.concat(columns);
-	    }
 	    columns = this.addOrderColumn(columns, showRowNum);
 	    columns = this.deleteColumnNotShow(columns);
 	    this.columns = columns || this.normalize(elements);
@@ -86277,6 +86250,9 @@
 	    this.originWidth = originWidth;
 	  }
 	
+	  // 向数据列中添加一列:行拖拽标识
+	
+	
 	  // delete the column which does not show
 	
 	
@@ -86561,6 +86537,24 @@
 	var _initialiseProps = function _initialiseProps() {
 	  this._cached = {};
 	
+	  this.addDragHandleColumn = function (columns, rowDraggAble) {
+	    if (!rowDraggAble) {
+	      return columns;
+	    }
+	    var dragHandleColumn = [{
+	      className: "drag-handle-column",
+	      title: "",
+	      key: "dragHandle",
+	      dataIndex: "dragHandle",
+	      width: 49,
+	      render: function render() {
+	        return _react2['default'].createElement(_beeIcon2['default'], { type: 'uf-navmenu' });
+	      }
+	    }];
+	    columns = dragHandleColumn.concat(columns);
+	    return columns;
+	  };
+	
 	  this.deleteColumnNotShow = function (columns) {
 	    var len = columns.length;
 	    for (var i = 0; i < len; i++) {

src/ColumnManager.js

@@ -8,21 +8,7 @@ export default class ColumnManager {
   _cached = {}
 
   constructor(columns, elements,originWidth,rowDraggAble,showRowNum) {
-    //判断是否使用行拖拽
+    columns = this.addDragHandleColumn(columns,rowDraggAble);
-    if(rowDraggAble) {
-      let dragHandleColumn =[{
-        className: "drag-handle-column",
-        title: "",
-        key: "dragHandle",
-        dataIndex: "dragHandle",
-        // fixed:"left",
-        width: 49,
-        render: () => {
-          return <Icon type="uf-navmenu" />
-        }
-      }]
-      columns = dragHandleColumn.concat(columns);
-    }
     columns = this.addOrderColumn(columns,showRowNum);
     columns = this.deleteColumnNotShow(columns);
     this.columns = columns || this.normalize(elements);
@@ -30,6 +16,25 @@ export default class ColumnManager {
     this.originWidth = originWidth;
   }
 
+  // 向数据列中添加一列:行拖拽标识
+  addDragHandleColumn = (columns, rowDraggAble) => {
+    if(!rowDraggAble){
+      return columns
+    }
+    let dragHandleColumn =[{
+      className: "drag-handle-column",
+      title: "",
+      key: "dragHandle",
+      dataIndex: "dragHandle",
+      width: 49,
+      render: () => {
+        return <Icon type="uf-navmenu" />
+      }
+    }]
+    columns = dragHandleColumn.concat(columns);
+    return columns;
+  }
+
   // delete the column which does not show
   deleteColumnNotShow = (columns) => {
     let len = columns.length;

src/Table.js

@@ -127,9 +127,6 @@ class Table extends Component {
       expandedRowKeys = props.expandedRowKeys || props.defaultExpandedRowKeys;
     }
 
-    this.columnsChildrenList = [];//复杂表头、所有叶子节点
-    this.getColumnsChildrenList(props.columns);//复杂表头、所有叶子节点
-
     this.state = {
       expandedRowKeys,
       data: props.data,
@@ -171,6 +168,7 @@ class Table extends Component {
     this.contentTable = null;
     this.leftColumnsLength  //左侧固定列的长度
     this.centerColumnsLength  //非固定列的长度 
+    this.columnsChildrenList = [];//复杂表头、所有叶子节点
   }
   componentWillMount() {
     this.centerColumnsLength = this.columnManager.centerColumns().length
@@ -214,7 +212,7 @@ class Table extends Component {
       this.columnManager.reset(nextProps.columns, null, this.props.showRowNum); // 加入this.props.showRowNum参数
       if(nextProps.columns.length !== this.props.columns.length && this.refs && this.bodyTable){
          this.scrollTop = this.bodyTable.scrollTop;
-     }
+      }
     } else if (nextProps.children !== this.props.children) {
       this.columnManager.reset(null, nextProps.children,this.props.showRowNum); // 加入this.props.showRowNum参数
     }
@@ -426,24 +424,11 @@ class Table extends Component {
     return this.props.expandedRowKeys || this.state.expandedRowKeys;
   }
 
-  //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;
+    this.columnsChildrenList = []; //复杂表头拖拽，重新render表头前，将其置空
     const rows = this.getHeaderRows(columns);
     if (expandIconAsCell && fixed !== 'right') {
       rows[0].unshift({
@@ -453,6 +438,10 @@ class Table extends Component {
         rowSpan: rows.length,
         width: expandIconCellWidth
       });
+      this.columnsChildrenList.unshift({
+        className: "u-table-expand-icon-column",
+        key: "expand-icon"
+      })
     }
     const trStyle = headerHeight&&!fixed ? { height: headerHeight } : (fixed ? this.getHeaderRowStyle(columns, rows) : null);
     let drop = draggable ? { onDragStart, onDragOver, onDrop,onDragEnd, onDragEnter, draggable } : {};
@@ -530,6 +519,8 @@ class Table extends Component {
       }
       if (column.children) {
         this.getHeaderRows(column.children, currentRow + 1, rows);
+      } else {
+        this.columnsChildrenList.push(column); //复杂表头拖拽，所有叶子节点
       }
       if ('colSpan' in column) {
         cell.colSpan = column.colSpan;

src/TableHeader.js

@@ -225,17 +225,16 @@ 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 = -1;
       let defaultWidth = currentElement.getAttribute("data-th-width"); 
       this.drag.option = "border";//拖拽操作
       if(columnsChildrenList){
         let columnKey = currentElement.getAttribute("data-line-key");
         if(columnKey){
-          currentIndex = columnsChildrenList.findIndex(da=>da.key.toLowerCase() === columnKey.toLowerCase());
+          currentIndex = columnsChildrenList.findIndex(da=> (da.key && da.key.toLowerCase()) === columnKey.toLowerCase());
         }
       }
-      console.log("currentIndex :",currentIndex);
+      // console.log("currentIndex :",currentIndex);
       let currentObj = this.table.cols[currentIndex];
       this.drag.currIndex = currentIndex;
       this.drag.oldLeft = event.x;
@@ -294,7 +293,7 @@ class TableHeader extends Component {
     if(targetEvent.nodeName.toUpperCase() != "TH"){
       th = this.getThDome(targetEvent);
     }
-    console.log(" getTargetToTh: ", th);
+    // console.log(" getTargetToTh: ", th);
     return th;
   }
   /**