feat(bee-table): 子表数据减少时，动态计算高度

build/Table.js

@@ -272,6 +272,14 @@ var Table = function (_Component) {
       );
     };
 
+    _this.getTdPadding = function (td) {
+      var tdPaddingTop = _this.getStyle(td, 'paddingTop'),
+          tdPaddingBottom = _this.getStyle(td, 'paddingBottom'),
+          tdBorderTop = _this.getStyle(td, 'borderTopWidth'),
+          tdBorderBottom = _this.getStyle(td, 'borderBottomWidth');
+      return Number(tdPaddingTop.replace('px', '')) + Number(tdPaddingBottom.replace('px', '')) + Number(tdBorderTop.replace('px', '')) + Number(tdBorderBottom.replace('px', ''));
+    };
+
     _this.onRowHoverMouseEnter = function () {
 
       _this.store.setState({
@@ -943,6 +951,8 @@ var Table = function (_Component) {
       if (rootIndex == -1) {
         index = i + lazyParentIndex;
       }
+      console.log('preHeight', props.preHeight);
+      console.log('height: ', height);
       rst.push(_react2["default"].createElement(_TableRow2["default"], _extends({
         indent: indent,
         indentSize: props.indentSize,
@@ -1364,7 +1374,17 @@ var Table = function (_Component) {
     return null;
   };
 
+  Table.prototype.getStyle = function getStyle(obj, attr) {
+    if (obj.currentStyle) {
+      return obj.currentStyle[attr];
+    } else {
+      return document.defaultView.getComputedStyle(obj, null)[attr];
+    }
+  };
+
   Table.prototype.syncFixedTableRowHeight = function syncFixedTableRowHeight() {
+    var _this5 = this;
+
     //this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题
     var _props9 = this.props,
         clsPrefix = _props9.clsPrefix,
@@ -1413,6 +1433,13 @@ var Table = function (_Component) {
     expandedRows.length > 0 && Array.prototype.forEach.call(expandedRows, function (row) {
       var parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key"),
           height = row && row.getBoundingClientRect().height || 'auto';
+      try {
+        //子表数据减少时，动态计算高度
+        var td = row.querySelector('td');
+        var tdPadding = _this5.getTdPadding(td);
+        var trueheight = row.querySelectorAll('.u-table')[0].getBoundingClientRect().height;
+        height = trueheight + tdPadding;
+      } catch (error) {}
       fixedColumnsExpandedRowsHeight[parentRowKey] = height;
     });
     if ((0, _shallowequal2["default"])(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsExpandedRowsHeight, fixedColumnsExpandedRowsHeight)) {
@@ -1435,10 +1462,10 @@ var Table = function (_Component) {
   };
 
   Table.prototype.findExpandedRow = function findExpandedRow(record, index) {
-    var _this5 = this;
+    var _this6 = this;
 
     var rows = this.getExpandedRows().filter(function (i) {
-      return i === _this5.getRowKey(record, index);
+      return i === _this6.getRowKey(record, index);
     });
     return rows[0];
   };
@@ -1566,7 +1593,7 @@ var Table = function (_Component) {
   };
 
   Table.prototype.render = function render() {
-    var _this6 = this;
+    var _this7 = this;
 
     var props = this.props;
     var clsPrefix = props.clsPrefix;
@@ -1613,7 +1640,7 @@ var Table = function (_Component) {
     return _react2["default"].createElement(
       'div',
       { className: className, style: props.style, ref: function ref(el) {
-          return _this6.contentTable = el;
+          return _this7.contentTable = el;
         },
         tabIndex: props.focusable && (props.tabIndex ? props.tabIndex : '0') },
       this.getTitle(),
@@ -1645,7 +1672,7 @@ var Table = function (_Component) {
         'div',
         { className: 'u-row-hover',
           onMouseEnter: this.onRowHoverMouseEnter, onMouseLeave: this.onRowHoverMouseLeave, ref: function ref(el) {
-            return _this6.hoverDom = el;
+            return _this7.hoverDom = el;
           } },
         props.hoverContent()
       )

dist/demo.css

@@ -907,241 +907,4 @@
     background: #344563;
     border-color: #505F79; }
 
-.demo04.u-table tr:nth-child(2n) {
-  background: #f7f9fb; }
-
-.demo04.u-table tr.u-table-row-hover, .demo04 .u-table tr:hover {
-  background: #ebecf0; }
-
-.demo22 .opt-btns {
-  margin-bottom: 8px; }
-
-.demo32 .u-table-thead th {
-  padding-top: 0px;
-  padding-bottom: 0px; }
-
-.demo0501 .u-table .u-row-hover .opt-btns button, .demo0501 .u-table .u-row-hover .cancel-btns button {
-  margin: 0; }
-  .demo0501 .u-table .u-row-hover .opt-btns button:first-child, .demo0501 .u-table .u-row-hover .cancel-btns button:first-child {
-    margin-right: 8px; }
-
-.demo0501 .u-table .u-table-row td {
-  padding: 5px 8px; }
-  .demo0501 .u-table .u-table-row td input {
-    font-size: 12px;
-    padding-left: 5px; }
-
-.demo0501 .u-table .u-table-row .u-form-control,
-.demo0501 .u-table .u-table-row .u-select-selection {
-  height: 30px; }
-
-.demo0501 .u-table .editable-cell-text-wrapper {
-  box-sizing: border-box;
-  line-height: 20px;
-  border-radius: 3px; }
-
-.demo0501 .u-table .required {
-  margin-left: 10px;
-  position: relative; }
-  .demo0501 .u-table .required::before {
-    content: " ";
-    border: 1px solid #F44336;
-    width: 0;
-    height: 12px;
-    position: absolute;
-    top: 9px;
-    left: -8px; }
-  .demo0501 .u-table .required span.u-input-group {
-    display: block; }
-
-.demo0501 .u-table .verify-cell {
-  padding-right: 25px !important; }
-
-.demo0501 .u-table .required-icon {
-  position: absolute;
-  top: 2px;
-  color: #F44336;
-  font-size: 20px; }
-
-.demo0501 .u-table .ref-input-wrap {
-  width: 160px !important; }
-
-.u-editable-table-tp .tp-content {
-  color: #F44336; }
-
-.u-editable-table .u-table .u-table-row td {
-  padding: 5px 8px; }
-  .u-editable-table .u-table .u-table-row td input {
-    padding-left: 5px;
-    font-size: 12px; }
-    .u-editable-table .u-table .u-table-row td input.error {
-      border-color: #F44336; }
-
-.u-editable-table .u-table .u-table-row .editable-cell {
-  height: 30px; }
-
-.u-editable-table .u-table .u-table-row-hover .editable-cell-text-wrapper {
-  line-height: 19px; }
-
-.u-editable-table .u-table .u-table-row .u-form-control,
-.u-editable-table .u-table .u-table-row .u-select-selection {
-  height: 30px; }
-
-.u-editable-table .u-table .editable-cell-text-wrapper {
-  box-sizing: border-box;
-  line-height: 20px;
-  border-radius: 3px; }
-
-.u-editable-table .u-table .editable-cell-input-wrapper {
-  padding-right: 0; }
-  .u-editable-table .u-table .editable-cell-input-wrapper .ref-input-wrap {
-    width: auto !important;
-    height: 30px; }
-    .u-editable-table .u-table .editable-cell-input-wrapper .ref-input-wrap .u-input-group {
-      display: inline-block; }
-
-.u-editable-table .u-table .verify-cell {
-  padding-right: 25px !important; }
-
-.u-editable-table .u-table .require {
-  position: absolute;
-  top: 2px;
-  color: #F44336;
-  font-size: 20px; }
-
-.u-editable-table-tp .tp-content {
-  color: #F44336; }
-
-.demo0503-m-b.u-modal .u-modal-body {
-  padding: 16px 0;
-  background: #f7f9fb; }
-
-.demo0503-m-b .u-form-group {
-  overflow: hidden; }
-
-.demo0503-m-b .u-form-control {
-  font-size: 12px; }
-
-.demo0503-m-b .editable-cell {
-  display: block;
-  float: left;
-  width: 265px;
-  padding-right: 25px; }
-
-.demo0503-m-b .ref-input-wrap {
-  width: 240px !important; }
-
-.demo0503-m-b .u-label {
-  display: block;
-  float: left;
-  text-align: right;
-  width: 110px;
-  box-sizing: border-box;
-  padding-right: 10px;
-  font-size: 12px;
-  height: 32px;
-  line-height: 32px; }
-  .demo0503-m-b .u-label .mast {
-    padding: 0;
-    color: red; }
-
-.demo0503-m-b .required-icon {
-  position: absolute;
-  top: 2px;
-  color: #F44336;
-  font-size: 20px; }
-
-.u-editable-table-tp {
-  z-index: 9999 !important; }
-  .u-editable-table-tp .tp-content {
-    color: #F44336; }
-
-.ref-core-button .u-button:first-child {
-  margin-right: 8px; }
-
-.demo0505 .toolbar-btns {
-  margin-bottom: 8px; }
-  .demo0505 .toolbar-btns .u-button:first-child {
-    margin-right: 8px; }
-
-.demo0505 .u-table .u-row-select {
-  background-color: #FFF7E7; }
-
-.demo0505 .u-table .u-table-row td {
-  padding: 5px 8px; }
-  .demo0505 .u-table .u-table-row td input {
-    font-size: 12px;
-    padding-left: 5px; }
-
-.demo0505 .u-table .u-table-row .u-form-control,
-.demo0505 .u-table .u-table-row .u-select-selection {
-  height: 30px; }
-
-.demo0505 .u-table .editable-cell-text-wrapper {
-  box-sizing: border-box;
-  line-height: 20px;
-  border-radius: 3px; }
-
-.demo0505 .u-table .required {
-  margin-left: 10px;
-  position: relative; }
-  .demo0505 .u-table .required::before {
-    content: " ";
-    border: 1px solid #F44336;
-    width: 0;
-    height: 12px;
-    position: absolute;
-    top: 9px;
-    left: -8px; }
-  .demo0505 .u-table .required span.u-input-group {
-    display: block; }
-
-.demo0505 .u-table .verify-cell {
-  padding-right: 25px !important; }
-
-.demo0505 .u-table .edited::after {
-  content: " ";
-  position: absolute;
-  z-index: 999;
-  top: 0;
-  left: 0;
-  border-width: 5px;
-  border-style: solid;
-  border-color: #f44336 transparent transparent #f44336; }
-
-.demo0505 .u-table .required-icon {
-  position: absolute;
-  top: 2px;
-  color: #F44336;
-  font-size: 20px; }
-
-.demo0505 .u-table .ref-input-wrap {
-  width: 160px !important; }
-
-.u-editable-table-tp .tp-content {
-  color: #F44336; }
-
-th .drop-menu .uf {
-  font-size: 12px;
-  visibility: hidden;
-  margin-left: 15px; }
-
-th:hover .uf {
-  visibility: visible; }
-
-.expanded-table .expand-icon-con .uf {
-  font-size: 12px; }
-
-
-.demo8 .u-table {
-  margin-bottom: 11px; }
-
-.demo8 .u-pagination {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-align: center;
-  align-items: center;
-  -ms-flex-pack: center;
-  justify-content: center; }
-
 /*# sourceMappingURL=demo.css.map */

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "2.2.46",
+ "version": "2.2.47",
  "description": "Table ui component for react",
  "keywords": [
   "react",

src/Table.js

@@ -783,6 +783,8 @@ class Table extends Component {
       if(rootIndex ==-1){
         index = i+lazyParentIndex
       }
+      console.log('preHeight',props.preHeight)
+      console.log('height: ',height)
       rst.push(
         <TableRow
           indent={indent}
@@ -1167,6 +1169,20 @@ class Table extends Component {
     }
     return null;
   }
+  getStyle(obj,attr){
+    if(obj.currentStyle){
+        return obj.currentStyle[attr];
+    }
+    else{
+        return document.defaultView.getComputedStyle(obj,null)[attr];
+    }
+  }
+  getTdPadding=(td)=>{
+    let tdPaddingTop = this.getStyle(td,'paddingTop'),tdPaddingBottom = this.getStyle(td,'paddingBottom'),
+    tdBorderTop = this.getStyle(td,'borderTopWidth'),tdBorderBottom = this.getStyle(td,'borderBottomWidth');
+    return Number(tdPaddingTop.replace('px',''))+Number(tdPaddingBottom.replace('px',''))+Number(tdBorderTop.replace('px',''))+Number(tdBorderBottom.replace('px',''))
+    
+  }
 
   syncFixedTableRowHeight() {
     //this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题
@@ -1212,6 +1228,14 @@ class Table extends Component {
     expandedRows.length > 0 && Array.prototype.forEach.call(expandedRows,row => {
       let parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key"),
           height = row && row.getBoundingClientRect().height || 'auto';
+          try {//子表数据减少时，动态计算高度
+            let td = row.querySelector('td');
+            let tdPadding = this.getTdPadding(td);
+            let trueheight = row.querySelectorAll('.u-table')[0].getBoundingClientRect().height;
+            height = trueheight+tdPadding;
+          } catch (error) {
+            
+          }
       fixedColumnsExpandedRowsHeight[parentRowKey] = height;
     })
     if (shallowequal(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) &&