增加 onDraggingBorder 拖拽时的回调

build/Table.js

@@ -568,7 +568,8 @@ var Table = function (_Component) {
         afterDragColWidth = _props.afterDragColWidth,
         headerScroll = _props.headerScroll,
         bordered = _props.bordered,
-        onDropBorder = _props.onDropBorder;
+        onDropBorder = _props.onDropBorder,
+        onDraggingBorder = _props.onDraggingBorder;
 
     var rows = this.getHeaderRows(columns);
     if (expandIconAsCell && fixed !== 'right') {
@@ -582,7 +583,7 @@ var Table = function (_Component) {
 
     var trStyle = headerHeight && !fixed ? { height: headerHeight } : fixed ? this.getHeaderRowStyle(columns, rows) : null;
     var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnter: onDragEnter, draggable: draggable } : {};
-    var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, dragborderKey: dragborderKey, onDropBorder: onDropBorder } : {};
+    var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, dragborderKey: dragborderKey, onDropBorder: onDropBorder, onDraggingBorder: onDraggingBorder } : {};
     var contentWidthDiff = 0;
     //非固定表格,宽度不够时自动扩充
     if (!fixed) {

build/TableHeader.js

@@ -147,7 +147,8 @@ var TableHeader = function (_Component) {
           scrollbarWidth = _this$props2.scrollbarWidth,
           contentTable = _this$props2.contentTable,
           headerScroll = _this$props2.headerScroll,
-          lastShowIndex = _this$props2.lastShowIndex;
+          lastShowIndex = _this$props2.lastShowIndex,
+          onDraggingBorder = _this$props2.onDraggingBorder;
 
       _utils.Event.stopPropagation(e);
       var event = _utils.Event.getEvent(e);
@@ -214,9 +215,11 @@ var TableHeader = function (_Component) {
         }
       } else if (_this.props.draggable && _this.drag.option == "draggable") {
         // console.log(" --onTrMouseMove--draggable- ",this.drag.option);
-      } else {
+      } else {}
         // console.log("onTrMouseMove dragborder or draggable is all false !");
-        }
+
+        // 增加拖拽列宽动作的回调函数
+      _this.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this.drag.newWidth);
     };
 
     _this.onTrMouseUp = function (e) {

docs/api.md

@@ -265,7 +265,8 @@ Table 组件参数：
 | dragborder | 拖拽调整列宽度 | boolean | false |
 | draggable | 拖拽交换列 | boolean | false |
 | onDrop | 拖拽释放回调函数(交换列) | function | () => {} |
-| onDropBorder | 拖拽释放回调函数(调整列宽) | function | (e) => {} |
+| onDropBorder | 拖拽释放回调函数(调整列宽) | function | (e,width) => {} |
+| onDraggingBorder | 调整列宽过程中触发的回调函数 | function | (e,width) => {} |
 
 #### dragColumn 使用示例
 - [拖拽改变列顺序](http://design.yonyoucloud.com/tinper-bee/bee-table#%E6%8B%96%E6%8B%BD%E6%94%B9%E5%8F%98%E5%88%97%E9%A1%BA%E5%BA%8F)

src/Table.js

@@ -395,7 +395,7 @@ class Table extends Component {
 
   getHeader(columns, fixed) {
     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} = this.props;
+      onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder,onDraggingBorder} = this.props;
     const rows = this.getHeaderRows(columns);
     if (expandIconAsCell && fixed !== 'right') {
       rows[0].unshift({
@@ -408,7 +408,7 @@ class Table extends Component {
 
     const trStyle = headerHeight&&!fixed ? { height: headerHeight } : (fixed ? this.getHeaderRowStyle(columns, rows) : null);
     let drop = draggable ? { onDragStart, onDragOver, onDrop, onDragEnter, draggable } : {};
-    let dragBorder = dragborder ? { onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey,onDropBorder } : {};
+    let dragBorder = dragborder ? { onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey,onDropBorder,onDraggingBorder } : {};
     let contentWidthDiff = 0;
     //非固定表格,宽度不够时自动扩充
     if (!fixed) {

src/TableHeader.js

@@ -263,7 +263,7 @@ class TableHeader extends Component {
    */
   onTrMouseMove = (e) => {
     if(!this.props.dragborder && !this.props.draggable)return;
-    const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex} = this.props;
+    const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex,onDraggingBorder} = this.props;
     Event.stopPropagation(e); 
     let event = Event.getEvent(e);  
     if(this.props.dragborder && this.drag.option == "border"){
@@ -331,6 +331,8 @@ class TableHeader extends Component {
     }else{
       // console.log("onTrMouseMove dragborder or draggable is all false !");
     }
+    // 增加拖拽列宽动作的回调函数
+    this.drag.newWidth && onDraggingBorder && onDraggingBorder(event, this.drag.newWidth);
   }
 
     /**