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

build/Table.css

@@ -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;
-  animation: rotate 0.75s 0s linear infinite; }
+  -webkit-animation: rotate 1.5s 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 {
-  border: 2px solid #3f51b5;
-  border-bottom-color: transparent; }
+.u-loading.u-loading-rotate.u-loading-rotate-primary > div > .uf {
+  color: #3f51b5; }
 
-.u-loading.u-loading-rotate.u-loading-rotate-success > div {
-  border: 2px solid #4caf50;
-  border-bottom-color: transparent; }
+.u-loading.u-loading-rotate.u-loading-rotate-success > div > .uf {
+  color: #4caf50; }
 
-.u-loading.u-loading-rotate.u-loading-rotate-warning > div {
-  border: 2px solid #ff9800;
-  border-bottom-color: transparent; }
+.u-loading.u-loading-rotate.u-loading-rotate-warning > div > .uf {
+  color: #ff9800; }
 
 .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);
-    transform: rotate(180deg) scale(0.6); }
+    -webkit-transform: rotate(180deg) scale(1);
+    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) {
-      return height ? height : row.getBoundingClientRect().height || 'auto';
+    var fixedColumnsBodyRowsHeight = [].map.call(bodyRows, function (row, index) {
+      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) {

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",
-  "shineout": "^1.1.7"
+  "react-dom": "^16.6.3"
  }
 }

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 });