动态判断是否需要显示纵向滚动条 fix：[IUAP FOR NC CloudIFNC-639]

build/Table.css

@@ -3,11 +3,11 @@
 /*  Navlayout  */
 /* FormGroup */
 /*  Navlayout  */
-/**
+/**
-  * 加载背景
+  * 加载背景
   */
-/**
+/**
-  * 文字
+  * 文字
   */
 .u-loading-desc {
   position: absolute;
@@ -18,8 +18,8 @@
   color: #000;
   text-align: center; }
 
-/**
+/**
-  * default样式 单个圆圈加载
+  * default样式 单个圆圈加载
   */
 .u-loading.u-loading-rotate > div {
   position: absolute;
@@ -27,8 +27,6 @@
   margin: 2px;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
-  border: 2px solid #0084ff;
-  border-bottom-color: transparent;
   width: 40px;
   height: 40px;
   top: 50%;
@@ -37,32 +35,41 @@
   margin-top: -22px;
   background: transparent !important;
   display: inline-block;
-  -webkit-animation: rotate 0.75s 0s linear infinite;
+  -webkit-animation: rotate 1.5s 0s linear infinite;
-  animation: rotate 0.75s 0s linear infinite; }
+  animation: rotate 1.5s 0s linear infinite;
+  text-align: center;
+  line-height: 40px; }
+  .u-loading.u-loading-rotate > div > .uf {
+    color: #0084ff;
+    font-size: 40px;
+    padding: 0; }
 
 .u-loading.u-loading-rotate.u-loading-rotate-lg > div {
   margin-left: -35px;
   margin-top: -35px;
   width: 60px;
-  height: 60px; }
+  height: 60px;
+  line-height: 60px; }
+  .u-loading.u-loading-rotate.u-loading-rotate-lg > div > .uf {
+    font-size: 60px; }
 
 .u-loading.u-loading-rotate.u-loading-rotate-sm > div {
   margin-left: -15px;
   margin-top: -15px;
   width: 25px;
-  height: 25px; }
+  height: 25px;
+  line-height: 25px; }
+  .u-loading.u-loading-rotate.u-loading-rotate-sm > div > .uf {
+    font-size: 25px; }
 
-.u-loading.u-loading-rotate.u-loading-rotate-primary > div {
+.u-loading.u-loading-rotate.u-loading-rotate-primary > div > .uf {
-  border: 2px solid #3f51b5;
+  color: #3f51b5; }
-  border-bottom-color: transparent; }
 
-.u-loading.u-loading-rotate.u-loading-rotate-success > div {
+.u-loading.u-loading-rotate.u-loading-rotate-success > div > .uf {
-  border: 2px solid #4caf50;
+  color: #4caf50; }
-  border-bottom-color: transparent; }
 
-.u-loading.u-loading-rotate.u-loading-rotate-warning > div {
+.u-loading.u-loading-rotate.u-loading-rotate-warning > div > .uf {
-  border: 2px solid #ff9800;
+  color: #ff9800; }
-  border-bottom-color: transparent; }
 
 .u-loading-backdrop {
   position: absolute;
@@ -82,8 +89,8 @@
     -webkit-transform: rotate(0deg) scale(1);
     transform: rotate(0deg) scale(1); }
   50% {
-    -webkit-transform: rotate(180deg) scale(0.6);
+    -webkit-transform: rotate(180deg) scale(1);
-    transform: rotate(180deg) scale(0.6); }
+    transform: rotate(180deg) scale(1); }
   100% {
     -webkit-transform: rotate(360deg) scale(1);
     transform: rotate(360deg) scale(1); } }

build/Table.js

@@ -144,7 +144,8 @@ var defaultProps = {
   syncHover: true,
   setRowHeight: function setRowHeight() {},
   setRowParentIndex: function setRowParentIndex() {},
-  tabIndex: '0'
+  tabIndex: '0',
+  heightConsistent: false
 };
 
 var Table = function (_Component) {
@@ -700,7 +701,7 @@ var Table = function (_Component) {
 
       if (props.height) {
         height = props.height;
-      } else if (fixed) {
+      } else if (fixed || props.heightConsistent) {
         height = fixedColumnsBodyRowsHeight[fixedIndex];
       }
 
@@ -1097,10 +1098,13 @@ var Table = function (_Component) {
         clsPrefix = _props7.clsPrefix,
         height = _props7.height,
         headerHeight = _props7.headerHeight,
-        columns = _props7.columns;
+        columns = _props7.columns,
+        heightConsistent = _props7.heightConsistent;
 
     var headRows = this.refs.headTable ? this.refs.headTable.querySelectorAll('thead') : this.refs.bodyTable.querySelectorAll('thead');
     var bodyRows = this.refs.bodyTable.querySelectorAll('.' + clsPrefix + '-row') || [];
+    var leftBodyRows = this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll('.' + clsPrefix + '-row') || [];
+    var rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll('.' + clsPrefix + '-row') || [];
     var fixedColumnsHeadRowsHeight = [].map.call(headRows, function (row) {
       var height = headerHeight;
       if (headerHeight) {
@@ -1108,9 +1112,28 @@ var Table = function (_Component) {
       }
       return headerHeight ? height : row.getBoundingClientRect().height || 'auto';
     });
-    var fixedColumnsBodyRowsHeight = [].map.call(bodyRows, function (row) {
+    var fixedColumnsBodyRowsHeight = [].map.call(bodyRows, function (row, index) {
-      return height ? height : row.getBoundingClientRect().height || 'auto';
+      var rsHeight = height;
+      if (rsHeight) {
+        return rsHeight;
+      } else {
+        // 为了提高性能，默认获取主表的高度，但是有的场景中固定列的高度比主表的高度高，所以提供此属性，会统计所有列的高度取最大的，设置
+        if (heightConsistent) {
+          var leftHeight = void 0,
+              rightHeight = void 0,
+              currentHeight = void 0,
+              maxHeight = void 0;
+          leftHeight = leftBodyRows[index] ? leftBodyRows[index].getBoundingClientRect().height : 0;
+          rightHeight = rightBodyRows[index] ? rightBodyRows[index].getBoundingClientRect().height : 0;
+          currentHeight = row.getBoundingClientRect().height;
+          maxHeight = Math.max(leftHeight, rightHeight, currentHeight);
+          return maxHeight || 'auto';
+        } else {
+          return row.getBoundingClientRect().height || 'auto';
+        }
+      }
     });
+
     if ((0, _shallowequal2["default"])(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight)) {
       return;
     }

build/TableHeader.js

@@ -158,7 +158,7 @@ var TableHeader = function (_Component) {
     _this.onLineMouseUp = function (event) {
       var width = _this.drag.newWidth;
       _this.clearDragBorder(event);
-      _this.props.onDropBorder(event, width);
+      _this.props.onDropBorder && _this.props.onDropBorder(event, width);
     };
 
     _this.bodyonLineMouseMove = function (event) {

build/lib/dragColumn.js

@@ -1,7 +1,7 @@
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -36,137 +36,137 @@ var cloneDeep = require('lodash.clonedeep');
 
 function dragColumn(Table) {
 
-    return function (_Component) {
+  return function (_Component) {
-        _inherits(DragColumn, _Component);
+    _inherits(DragColumn, _Component);
 
-        function DragColumn(props) {
+    function DragColumn(props) {
-            _classCallCheck(this, DragColumn);
+      _classCallCheck(this, DragColumn);
 
-            var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+      var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 
-            _this.setColumOrderByIndex = function (_column) {
+      _this.setColumOrderByIndex = function (_column) {
-                _column.forEach(function (da, i) {
+        _column.forEach(function (da, i) {
-                    da.dragIndex = i;
+          da.dragIndex = i;
-                    da.drgHover = false;
+          da.drgHover = false;
-                });
-                return _column;
-            };
-
-            _this.onDrop = function (event, data) {
-                var dragSource = data.dragSource,
-                    dragTarg = data.dragTarg;
-                var columns = _this.state.columns;
-
-                var sourceIndex = -1,
-                    targetIndex = -1;
-
-                sourceIndex = columns.findIndex(function (da, i) {
-                    return da.key == dragSource.key;
-                });
-                targetIndex = columns.findIndex(function (da, i) {
-                    return da.key == dragTarg.key;
-                });
-                // for (let index = 0; index < columns.length; index++) {
-                //   const da = columns[index];
-                //   if(da.key === dragSource.key){
-                //     columns[index] = dragTargColum; 
-                //   }
-                //   if(da.key === dragTarg.key){
-                //     columns[index] = dragSourceColum;
-                //   }
-                // }
-                // 向前移动
-                if (targetIndex < sourceIndex) {
-                    targetIndex = targetIndex + 1;
-                }
-                columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
-                _this.setState({
-                    columns: cloneDeep(columns)
-                });
-                if (_this.props.onDrop) {
-                    _this.props.onDrop(event, data, columns);
-                }
-            };
-
-            _this.getTarget = function (evt) {
-                return evt.target || evt.srcElement;
-            };
-
-            _this.state = {
-                columns: _this.setColumOrderByIndex(props.columns)
-            };
-            return _this;
-        }
-
-        DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-            if (nextProps.columns != this.props.columns) {
-                this.setState({
-                    columns: this.setColumOrderByIndex(nextProps.columns)
-                });
-            }
-        };
-
-        DragColumn.prototype.cloneDeep = function cloneDeep(obj) {
-            if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !== 'object' || Object.keys(obj).length === 0) {
-                return obj;
-            }
-            var resultData = {};
-            return this.recursion(obj, resultData);
-        };
-
-        DragColumn.prototype.recursion = function (_recursion) {
-            function recursion(_x) {
-                return _recursion.apply(this, arguments);
-            }
-
-            recursion.toString = function () {
-                return _recursion.toString();
-            };
-
-            return recursion;
-        }(function (obj) {
-            var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-            for (key in obj) {
-                if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) {
-                    data[key] = recursion(obj[key]);
-                } else {
-                    data[key] = obj[key];
-                }
-            }
-            return data;
         });
+        return _column;
+      };
 
-        DragColumn.prototype.render = function render() {
+      _this.onDrop = function (event, data) {
-            var _props = this.props,
+        var dragSource = data.dragSource,
-                data = _props.data,
+            dragTarg = data.dragTarg;
-                dragborder = _props.dragborder,
+        var columns = _this.state.columns;
-                draggable = _props.draggable,
-                className = _props.className,
-                columns = _props.columns,
-                onDragStart = _props.onDragStart,
-                onDragEnter = _props.onDragEnter,
-                onDragOver = _props.onDragOver,
-                onDrop = _props.onDrop,
-                others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']);
 
-            var key = new Date().getTime();
+        var sourceIndex = -1,
-            return _react2["default"].createElement(Table, _extends({}, others, {
+            targetIndex = -1;
-                columns: this.state.columns,
-                data: data,
-                className: className + ' u-table-drag-border',
-                onDragStart: this.onDragStart,
-                onDragOver: this.onDragOver,
-                onDrop: this.onDrop,
-                onDragEnter: this.onDragEnter,
-                draggable: draggable,
-                dragborder: dragborder
-                // dragborder={false}
-                , dragborderKey: key
-            }));
-        };
 
-        return DragColumn;
+        sourceIndex = columns.findIndex(function (da, i) {
-    }(_react.Component);
+          return da.key == dragSource.key;
+        });
+        targetIndex = columns.findIndex(function (da, i) {
+          return da.key == dragTarg.key;
+        });
+        // for (let index = 0; index < columns.length; index++) {
+        //   const da = columns[index];
+        //   if(da.key === dragSource.key){
+        //     columns[index] = dragTargColum; 
+        //   }
+        //   if(da.key === dragTarg.key){
+        //     columns[index] = dragSourceColum;
+        //   }
+        // }
+        // 向前移动
+        if (targetIndex < sourceIndex) {
+          targetIndex = targetIndex + 1;
+        }
+        columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
+        _this.setState({
+          columns: cloneDeep(columns)
+        });
+        if (_this.props.onDrop) {
+          _this.props.onDrop(event, data, columns);
+        }
+      };
+
+      _this.getTarget = function (evt) {
+        return evt.target || evt.srcElement;
+      };
+
+      _this.state = {
+        columns: _this.setColumOrderByIndex(props.columns)
+      };
+      return _this;
+    }
+
+    DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+      if (nextProps.columns != this.props.columns) {
+        this.setState({
+          columns: this.setColumOrderByIndex(nextProps.columns)
+        });
+      }
+    };
+
+    DragColumn.prototype.cloneDeep = function cloneDeep(obj) {
+      if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !== 'object' || Object.keys(obj).length === 0) {
+        return obj;
+      }
+      var resultData = {};
+      return this.recursion(obj, resultData);
+    };
+
+    DragColumn.prototype.recursion = function (_recursion) {
+      function recursion(_x) {
+        return _recursion.apply(this, arguments);
+      }
+
+      recursion.toString = function () {
+        return _recursion.toString();
+      };
+
+      return recursion;
+    }(function (obj) {
+      var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+      for (key in obj) {
+        if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) {
+          data[key] = recursion(obj[key]);
+        } else {
+          data[key] = obj[key];
+        }
+      }
+      return data;
+    });
+
+    DragColumn.prototype.render = function render() {
+      var _props = this.props,
+          data = _props.data,
+          dragborder = _props.dragborder,
+          draggable = _props.draggable,
+          className = _props.className,
+          columns = _props.columns,
+          onDragStart = _props.onDragStart,
+          onDragEnter = _props.onDragEnter,
+          onDragOver = _props.onDragOver,
+          onDrop = _props.onDrop,
+          others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']);
+
+      var key = new Date().getTime();
+      return _react2["default"].createElement(Table, _extends({}, others, {
+        columns: this.state.columns,
+        data: data,
+        className: className + ' u-table-drag-border',
+        onDragStart: this.onDragStart,
+        onDragOver: this.onDragOver,
+        onDrop: this.onDrop,
+        onDragEnter: this.onDragEnter,
+        draggable: draggable,
+        dragborder: dragborder
+        // dragborder={false}
+        , dragborderKey: key
+      }));
+    };
+
+    return DragColumn;
+  }(_react.Component);
 }
 module.exports = exports['default'];

build/lib/util.js

@@ -1,7 +1,7 @@
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -20,29 +20,29 @@ exports.ObjectAssign = ObjectAssign;
 */
 
 function sortBy(arr, prop, desc) {
-  var props = [],
+    var props = [],
-      ret = [],
+        ret = [],
-      i = 0,
+        i = 0,
-      len = arr.length;
+        len = arr.length;
-  if (typeof prop == 'string') {
+    if (typeof prop == 'string') {
-    for (; i < len; i++) {
+        for (; i < len; i++) {
-      var oI = arr[i];
+            var oI = arr[i];
-      (props[i] = new String(oI && oI[prop] || ''))._obj = oI;
+            (props[i] = new String(oI && oI[prop] || ''))._obj = oI;
+        }
+    } else if (typeof prop == 'function') {
+        for (; i < len; i++) {
+            var _oI = arr[i];
+            (props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
+        }
+    } else {
+        throw '参数类型错误';
     }
-  } else if (typeof prop == 'function') {
+    props.sort();
-    for (; i < len; i++) {
+    for (i = 0; i < len; i++) {
-      var _oI = arr[i];
+        ret[i] = props[i]._obj;
-      (props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
     }
-  } else {
+    if (desc) ret.reverse();
-    throw '参数类型错误';
+    return ret;
-  }
-  props.sort();
-  for (i = 0; i < len; i++) {
-    ret[i] = props[i]._obj;
-  }
-  if (desc) ret.reverse();
-  return ret;
 };
 
 /**
@@ -51,11 +51,11 @@ function sortBy(arr, prop, desc) {
  * @param {} property 
  */
 function compare(property) {
-  return function (a, b) {
+    return function (a, b) {
-    var value1 = a[property];
+        var value1 = a[property];
-    var value2 = b[property];
+        var value2 = b[property];
-    return value1 - value2;
+        return value1 - value2;
-  };
+    };
 }
 
 /**
@@ -63,17 +63,17 @@ function compare(property) {
  * @param {*} obj 要拷贝的对象 
  */
 function ObjectAssign(obj) {
-  var b = obj instanceof Array;
+    var b = obj instanceof Array;
-  var tagObj = b ? [] : {};
+    var tagObj = b ? [] : {};
-  if (b) {
+    if (b) {
-    //数组
+        //数组
-    obj.forEach(function (da) {
+        obj.forEach(function (da) {
-      var _da = {};
+            var _da = {};
-      _extends(_da, da);
+            _extends(_da, da);
-      tagObj.push(_da);
+            tagObj.push(_da);
-    });
+        });
-  } else {
+    } else {
-    _extends(tagObj, obj);
+        _extends(tagObj, obj);
-  }
+    }
-  return tagObj;
+    return tagObj;
 }

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "2.0.0",
+ "version": "2.0.1-beta.2",
  "description": "Table ui component for react",
  "keywords": [
   "react",
@@ -80,7 +80,7 @@
   "bee-form": "1.1.10",
   "bee-input-group": "latest",
   "bee-layout": "latest",
-  "bee-pagination": "1.1.18",
+  "bee-pagination": "latest",
   "bee-panel": "^1.2.12",
   "bee-popconfirm": "^1.0.2",
   "bee-tools": "latest",
@@ -93,7 +93,6 @@
   "jest": "^22.0.4",
   "react": "^16.6.3",
   "react-addons-test-utils": "^15.5.0",
-  "react-dom": "^16.6.3",
+  "react-dom": "^16.6.3"
-  "shineout": "^1.1.7"
  }
-}
+}

src/ColumnManager.js

@@ -184,7 +184,7 @@ export default class ColumnManager {
         if (column.fixed === 'left' || column.fixed === true){
           let width = column.width;
           if(typeof(width) == 'string' && width.includes('%') ){
-            width = contentWidth *  parseInt(col.width) /100;
+            width = contentWidth *  parseInt(column.width) /100;
           }
           leftColumnsWidth += parseInt(width)
         }
@@ -200,7 +200,7 @@ export default class ColumnManager {
        if (column.fixed === 'right'){
         let width = column.width;
         if(typeof(width) == 'string' && width.includes('%') ){
-          width = contentWidth *  parseInt(col.width) /100;
+          width = contentWidth *  parseInt(column.width) /100;
         }
         rightColumnsWidth += parseInt(width)
        }

src/Table.js

@@ -219,7 +219,8 @@ class Table extends Component {
     if (prevProps.data.length === 0  || this.props.data.length === 0 ) {
       this.resetScrollX();
     }
-
+    // 是否传入 scroll中的y属性，如果传入判断是否是整数，如果是则进行比较 。bodyTable 的clientHeight进行判断
+    this.isShowScrollY();
   }
 
   componentWillUnmount() {
@@ -268,7 +269,20 @@ class Table extends Component {
       this.setState({ contentWidthDiff: 0, lastShowIndex });//重新渲染，为了显示滚动条
     }
   }
-
+  //根据内容动态的判断是否显示纵向滚动条
+  isShowScrollY(){
+    const props = this.props;
+    const y = props.scroll && props.scroll.y;
+    if(y){
+      const bodyH = this.refs.bodyTable.clientHeight;
+      const bodyContentH = this.refs.bodyTable.querySelector('table').clientHeight;
+      console.log(bodyH,bodyContentH);
+      if(bodyContentH <= bodyH){
+        this.refs.bodyTable.style.overflowY='auto';
+        this.refs.headTable.style.overflowY='auto';
+      }
+    }
+  }
   onExpandedRowsChange(expandedRowKeys) {
     if (!this.props.expandedRowKeys) {
       this.setState({ expandedRowKeys });