固定列在主table里面隐藏样式前增加空格

build/Table.css

@@ -156,7 +156,6 @@
 .u-table {
   font-size: 12px;
   color: #666;
-  transition: opacity 0.3s ease;
   position: relative;
   line-height: 1.5;
   overflow: hidden; }
@@ -174,20 +173,17 @@
     border-collapse: collapse;
     text-align: left; }
   .u-table th {
-    font-weight: bold;
+    font-weight: bold; }
-    transition: background 0.3s ease; }
     .u-table th[colspan] {
       text-align: center; }
     .u-table th ::last-child {
       overflow: hidden; }
   .u-table td {
     border-bottom: 1px solid #e9e9e9; }
-  .u-table tr {
+  .u-table tr:hover {
-    transition: all 0.3s ease; }
+    background: rgb(227,242,253); }
-    .u-table tr:hover {
+    .u-table tr:hover td .uf-eye {
-      background: rgb(227,242,253); }
+      visibility: visible !important; }
-      .u-table tr:hover td .uf-eye {
-        visibility: visible !important; }
   .u-table tr.tr-row-hover {
     background: rgb(227,242,253); }
   .u-table th,
@@ -214,6 +210,8 @@
   .u-table-header {
     overflow: hidden;
     background: #f7f7f7; }
+  .u-table.fixed-height td {
+    padding: 0px 8px; }
   .u-table-fixed-header .u-table-body {
     background: #fff;
     position: relative; }

build/Table.js

@@ -258,6 +258,11 @@ var Table = function (_Component) {
     } else if (nextProps.children !== this.props.children) {
       this.columnManager.reset(null, nextProps.children);
     }
+    //适配lazyload
+    if (nextProps.scrollTop) {
+      this.refs.bodyTable.scrollTop = nextProps.scrollTop;
+      this.scrollTop = nextProps.scrollTop;
+    }
     if (!nextProps.originWidth) {
       this.computeTableWidth();
     }
@@ -597,7 +602,11 @@ var Table = function (_Component) {
 
     var expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
     var expandIconColumnIndex = fixed !== 'right' ? props.expandIconColumnIndex : -1;
-
+    if (props.lazyLoad && props.lazyLoad.preHeight) {
+      rst.push(_react2["default"].createElement(_TableRow2["default"], { height: props.lazyLoad.preHeight, columns: [], className: '', store: this.store, visible: true }));
+    }
+    var lazyCurrentIndex = props.lazyLoad && props.lazyLoad.currentIndex ? props.lazyLoad.currentIndex : 0;
+    var expandedContentHeight = 0;
     for (var i = 0; i < data.length; i++) {
       var record = data[i];
       var key = this.getRowKey(record, i);
@@ -606,6 +615,7 @@ var Table = function (_Component) {
       var expandedRowContent = void 0;
       if (expandedRowRender && isRowExpanded) {
         expandedRowContent = expandedRowRender(record, i, indent);
+        expandedContentHeight = parseInt(expandedRowContent.props.style ? expandedRowContent.props.style.height : 0);
       }
       //只有当使用expandedRowRender参数的时候才去识别isHiddenExpandIcon（隐藏行展开的icon）
       if (expandedRowRender && typeof props.haveExpandIcon == 'function') {
@@ -623,10 +633,10 @@ var Table = function (_Component) {
         fixedIndex = this.treeRowIndex;
       }
 
-      if (props.fixedHeight) {
+      if (props.height) {
-        height = props.fixedHeight;
+        height = props.height;
-      } else {
+      } else if (fixed) {
-        height = fixed && fixedColumnsBodyRowsHeight[fixedIndex] ? fixedColumnsBodyRowsHeight[fixedIndex] : null;
+        height = fixedColumnsBodyRowsHeight[fixedIndex];
       }
 
       var leafColumns = void 0;
@@ -670,7 +680,10 @@ var Table = function (_Component) {
         hoverKey: key,
         ref: rowRef,
         store: this.store,
-        fixed: fixed
+        fixed: fixed,
+        lazyCurrentIndex: lazyCurrentIndex,
+        expandedContentHeight: expandedContentHeight,
+        setRowHeight: props.setRowHeight
       })));
       this.treeRowIndex++;
       var subVisible = visible && isRowExpanded;
@@ -679,10 +692,14 @@ var Table = function (_Component) {
         rst.push(this.getExpandedRow(key, expandedRowContent, subVisible, expandedRowClassName(record, i, indent), fixed));
       }
       if (childrenColumn) {
-        this.treeType = true; //证明是tree表形式
+        this.treeType = true; //证明是tree表形式visible = {true}
         rst = rst.concat(this.getRowsByData(childrenColumn, subVisible, indent + 1, columns, fixed));
       }
     }
+
+    if (props.lazyLoad && props.lazyLoad.sufHeight) {
+      rst.push(_react2["default"].createElement(_TableRow2["default"], { height: props.lazyLoad.sufHeight, columns: [], className: '', store: this.store, visible: true }));
+    }
     return rst;
   };
 
@@ -732,7 +749,7 @@ var Table = function (_Component) {
         width = width + contentWidthDiff;
       }
       if (!fixed && c.fixed) {
-        fixedClass = _this3.props.clsPrefix + '-row-fixed-columns-in-body';
+        fixedClass = ' ' + _this3.props.clsPrefix + '-row-fixed-columns-in-body';
       }
       return _react2["default"].createElement('col', { key: c.key, style: { width: width, minWidth: c.width }, className: fixedClass });
     }));
@@ -1054,7 +1071,8 @@ var Table = function (_Component) {
     var _props8 = this.props,
         _props8$scroll = _props8.scroll,
         scroll = _props8$scroll === undefined ? {} : _props8$scroll,
-        clsPrefix = _props8.clsPrefix;
+        clsPrefix = _props8.clsPrefix,
+        handleScroll = _props8.handleScroll;
     var _refs = this.refs,
         headTable = _refs.headTable,
         bodyTable = _refs.bodyTable,
@@ -1084,7 +1102,8 @@ var Table = function (_Component) {
         (0, _componentClasses2["default"])(this.contentTable).remove(new RegExp('^' + clsPrefix + '-scroll-position-.+$')).add(clsPrefix + '-scroll-position-' + position);
       }
     }
-    if (scroll.y) {
+    console.log('lastScrollTop--' + this.lastScrollTop + '--eventScrollTop--' + e.target.scrollTop);
+    if (scroll.y && this.lastScrollTop != e.target.scrollTop) {
       if (fixedColumnsBodyLeft && e.target !== fixedColumnsBodyLeft) {
         fixedColumnsBodyLeft.scrollTop = e.target.scrollTop;
       }
@@ -1094,7 +1113,14 @@ var Table = function (_Component) {
       if (bodyTable && e.target !== bodyTable) {
         bodyTable.scrollTop = e.target.scrollTop;
       }
+      this.lastScrollTop = e.target.scrollTop;
+      console.log('handleBodyScroll---scrollTop--' + e.target.scrollTop);
+      if (handleScroll) {
+        var scrollTop = e.target.scrollTop;
+        (0, _utils.debounce)(handleScroll(scrollTop), 200);
+      }
     }
+
     // Remember last scrollLeft for scroll direction detecting.
     this.lastScrollLeft = e.target.scrollLeft;
   };
@@ -1127,7 +1153,10 @@ var Table = function (_Component) {
       className += ' ' + clsPrefix + '-bordered';
     }
     className += ' ' + clsPrefix + '-scroll-position-' + this.state.scrollPosition;
-
+    //如果传入height说明是固定高度
+    if (props.height) {
+      className += ' fixed-height';
+    }
     var isTableScroll = this.columnManager.isAnyColumnsFixed() || props.scroll.x || props.scroll.y;
     var loading = props.loading;
     if (typeof loading === 'boolean') {
@@ -1135,8 +1164,7 @@ var Table = function (_Component) {
         show: loading
       };
     }
-    var leftFixedWidth = this.columnManager.getLeftColumnsWidth();
+
-    var rightFixedWidth = this.columnManager.getRightColumnsWidth();
     return _react2["default"].createElement(
       'div',
       { className: className, style: props.style, ref: function ref(el) {

build/TableCell.js

@@ -109,7 +109,7 @@ var TableCell = function (_Component) {
     }
     //不是固定表格并且当前列是固定，则隐藏当前列
     if (column.fixed && !fixed) {
-      className = className + (clsPrefix + '-fixed-columns-in-body');
+      className = className + (' ' + clsPrefix + '-fixed-columns-in-body');
     }
     return _react2["default"].createElement(
       'td',

build/TableHeader.js

@@ -592,7 +592,7 @@ var TableHeader = function (_Component) {
             var canDotDrag = "";
             //主表格下、固定列或者是过滤行中含有固定列时添加该属性
             if (!fixed && (da.fixed || filterable && index == rows.length - 1 && rows[0][columIndex].fixed)) {
-              fixedStyle = clsPrefix + "-row-fixed-columns-in-body";
+              fixedStyle = " " + clsPrefix + "-row-fixed-columns-in-body";
             }
 
             if (lastShowIndex == columIndex) {

build/TableRow.js

@@ -84,6 +84,10 @@ var TableRow = function (_Component) {
       }
     };
 
+    _this.bindElement = function (el) {
+      _this.element = el;
+    };
+
     _this._timeout = null;
     _this.state = {
       hovered: false
@@ -92,7 +96,7 @@ var TableRow = function (_Component) {
     _this.onRowDoubleClick = _this.onRowDoubleClick.bind(_this);
     _this.onMouseEnter = _this.onMouseEnter.bind(_this);
     _this.onMouseLeave = _this.onMouseLeave.bind(_this);
-
+    _this.expandHeight = 0;
     return _this;
   }
 
@@ -110,6 +114,14 @@ var TableRow = function (_Component) {
         _this2.setState({ hovered: false });
       }
     });
+
+    this.setRowHeight();
+  };
+
+  TableRow.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
+    if (this.props.index !== prevProps.index) {
+      this.setRowHeight();
+    }
   };
 
   TableRow.prototype.componentWillUnmount = function componentWillUnmount() {
@@ -124,15 +136,27 @@ var TableRow = function (_Component) {
     }
   };
 
-  TableRow.prototype.onRowClick = function onRowClick(event) {
+  TableRow.prototype.setRowHeight = function setRowHeight() {
     var _props3 = this.props,
-        record = _props3.record,
+        setRowHeight = _props3.setRowHeight,
-        index = _props3.index,
+        expandedContentHeight = _props3.expandedContentHeight,
-        onRowClick = _props3.onRowClick,
+        _props3$lazyCurrentIn = _props3.lazyCurrentIndex,
-        expandable = _props3.expandable,
+        lazyCurrentIndex = _props3$lazyCurrentIn === undefined ? 0 : _props3$lazyCurrentIn,
-        expandRowByClick = _props3.expandRowByClick,
+        fixed = _props3.fixed;
-        expanded = _props3.expanded,
+
-        onExpand = _props3.onExpand;
+    if (!setRowHeight || !this.element || fixed) return;
+    setRowHeight(this.element.clientHeight + expandedContentHeight, this.props.index + lazyCurrentIndex);
+  };
+
+  TableRow.prototype.onRowClick = function onRowClick(event) {
+    var _props4 = this.props,
+        record = _props4.record,
+        index = _props4.index,
+        onRowClick = _props4.onRowClick,
+        expandable = _props4.expandable,
+        expandRowByClick = _props4.expandRowByClick,
+        expanded = _props4.expanded,
+        onExpand = _props4.onExpand;
 
     if (expandable && expandRowByClick) {
       onExpand(!expanded, record, index, event);
@@ -143,50 +167,52 @@ var TableRow = function (_Component) {
   };
 
   TableRow.prototype.onRowDoubleClick = function onRowDoubleClick(event) {
-    var _props4 = this.props,
+    var _props5 = this.props,
-        record = _props4.record,
+        record = _props5.record,
-        index = _props4.index,
+        index = _props5.index,
-        onRowDoubleClick = _props4.onRowDoubleClick;
+        onRowDoubleClick = _props5.onRowDoubleClick;
 
     this.clear();
     onRowDoubleClick(record, index, event);
   };
 
   TableRow.prototype.onMouseEnter = function onMouseEnter() {
-    var _props5 = this.props,
+    var _props6 = this.props,
-        onHover = _props5.onHover,
+        onHover = _props6.onHover,
-        hoverKey = _props5.hoverKey;
+        hoverKey = _props6.hoverKey;
 
     onHover(true, hoverKey);
   };
 
   TableRow.prototype.onMouseLeave = function onMouseLeave() {
-    var _props6 = this.props,
+    var _props7 = this.props,
-        onHover = _props6.onHover,
+        onHover = _props7.onHover,
-        hoverKey = _props6.hoverKey;
+        hoverKey = _props7.hoverKey;
 
     onHover(false, hoverKey);
   };
 
   TableRow.prototype.render = function render() {
-    var _props7 = this.props,
+    var _props8 = this.props,
-        clsPrefix = _props7.clsPrefix,
+        clsPrefix = _props8.clsPrefix,
-        columns = _props7.columns,
+        columns = _props8.columns,
-        record = _props7.record,
+        record = _props8.record,
-        height = _props7.height,
+        height = _props8.height,
-        visible = _props7.visible,
+        visible = _props8.visible,
-        index = _props7.index,
+        index = _props8.index,
-        expandIconColumnIndex = _props7.expandIconColumnIndex,
+        expandIconColumnIndex = _props8.expandIconColumnIndex,
-        expandIconAsCell = _props7.expandIconAsCell,
+        expandIconAsCell = _props8.expandIconAsCell,
-        expanded = _props7.expanded,
+        expanded = _props8.expanded,
-        expandRowByClick = _props7.expandRowByClick,
+        expandRowByClick = _props8.expandRowByClick,
-        expandable = _props7.expandable,
+        expandable = _props8.expandable,
-        onExpand = _props7.onExpand,
+        onExpand = _props8.onExpand,
-        needIndentSpaced = _props7.needIndentSpaced,
+        needIndentSpaced = _props8.needIndentSpaced,
-        indent = _props7.indent,
+        indent = _props8.indent,
-        indentSize = _props7.indentSize,
+        indentSize = _props8.indentSize,
-        isHiddenExpandIcon = _props7.isHiddenExpandIcon,
+        isHiddenExpandIcon = _props8.isHiddenExpandIcon,
-        fixed = _props7.fixed;
+        fixed = _props8.fixed,
+        _props8$lazyCurrentIn = _props8.lazyCurrentIndex,
+        lazyCurrentIndex = _props8$lazyCurrentIn === undefined ? 0 : _props8$lazyCurrentIn;
 
     var showSum = false;
     var className = this.props.className;
@@ -229,7 +255,7 @@ var TableRow = function (_Component) {
         record: record,
         indentSize: indentSize,
         indent: indent,
-        index: index,
+        index: index + lazyCurrentIndex,
         column: columns[i],
         key: columns[i].key,
         fixed: fixed,
@@ -250,7 +276,8 @@ var TableRow = function (_Component) {
         onMouseEnter: this.onMouseEnter,
         onMouseLeave: this.onMouseLeave,
         className: clsPrefix + ' ' + className + ' ' + clsPrefix + '-level-' + indent,
-        style: style
+        style: style,
+        ref: this.bindElement
       },
       cells
     );

build/lib/bigData.js

@@ -26,17 +26,11 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
 
-var propTypes = {
+var defaultHeight = 40;
-  rowsInView: _propTypes2["default"].number.isRequired
-};
-var defaultProps = {
-  data: undefined,
-  height: 40, //默认行高
-  rowsInView: 25
-};
-
 function bigData(Table) {
-  return function (_Component) {
+  var _class, _temp, _initialiseProps;
+
+  return _temp = _class = function (_Component) {
     _inherits(BigData, _Component);
 
     function BigData(props) {
@@ -44,21 +38,28 @@ function bigData(Table) {
 
       var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 
+      _initialiseProps.call(_this);
+
       _this.state = {
         currentIndex: 0,
         scrollLeft: 0,
         scrollTop: 0
       };
-
+      var rowHeight = _this.props.height ? _this.props.height : defaultHeight;
+      //默认显示25条，rowsInView根据定高算的。在非固定高下，这个只是一个大概的值。
+      _this.rowsInView = _this.props.scroll.y ? Math.ceil(_this.props.scroll.y / rowHeight) : 25;
       _this.cachedRowHeight = [];
       _this.lastScrollTop = 0;
+
+      _this.setRowHeight = _this.setRowHeight.bind(_this);
       return _this;
     }
     /**
-     *获取数据区高度 
+     *获取数据区高度
-     * 
+     *
-     * 
+     *
-    **/
+     **/
+
 
     BigData.prototype.getContentHeight = function getContentHeight() {
       if (!this.props.data) return 0;
@@ -66,24 +67,112 @@ function bigData(Table) {
     };
 
     BigData.prototype.getSumHeight = function getSumHeight(start, end) {
-      var rowHeight = this.props.rowHeight;
+      var height = this.props.height;
 
-      var height = 0;
+      var rowHeight = height ? height : defaultHeight;
+      var sumHeight = 0;
       for (var i = start; i < end; i++) {
-        height += this.cachedRowHeight[i] || rowHeight;
+        sumHeight += this.cachedRowHeight[i] || rowHeight;
       }
-      return height;
+      return sumHeight;
     };
 
-    BigData.prototype.getData = function getData() {};
+    // getIndex(scrollTop = this.state.scrollTop) {
+    //     const { data } = this.props
+    //     const {rowsInView} = this;
+    //     const max = data.length
+    //     const mcf = scrollTop > 0.5 ? Math.ceil : Math.floor
+    //     let index = mcf((scrollTop * max) - (rowsInView * scrollTop))
+    //     if (index > max - rowsInView) index = max - rowsInView
+    //     if (index < 0) index = 0
+    //     return index
+    // }
+
+
+    // getLastRowHeight = (index) =>{
+    //     const { height, data } = this.props
+    //     const {rowsInView} = this;
+    //     if (index + rowsInView >= data.length) return 0
+
+    //     let lastRowHeight = 0
+    //     if (index >= 1 && index < data.length / 2) {
+    //     lastRowHeight = this.cachedRowHeight[index - 1] || height
+    //     }
+    //     return lastRowHeight
+    // }
+
+
+    BigData.prototype.setRowHeight = function setRowHeight(height, index) {
+      this.cachedRowHeight[index] = height;
+    };
 
     BigData.prototype.render = function render() {
-      return _react2["default"].createElement(Table, _extends({}, this.props, { data: this.getData }));
+      var data = this.props.data;
+      var _state = this.state,
+          currentIndex = _state.currentIndex,
+          scrollTop = _state.scrollTop;
+      var rowsInView = this.rowsInView;
+
+      var lazyLoad = {
+        preHeight: this.getSumHeight(0, currentIndex),
+        sufHeight: this.getSumHeight(currentIndex + rowsInView, data.length),
+        currentIndex: currentIndex
+      };
+
+      return _react2["default"].createElement(Table, _extends({}, this.props, {
+        data: data.slice(currentIndex, currentIndex + rowsInView),
+        lazyLoad: lazyLoad,
+        handleScroll: this.handleScroll,
+        scrollTop: scrollTop,
+        setRowHeight: this.setRowHeight
+        //   className={'lazy-table'}
+      }));
     };
 
     return BigData;
-  }(_react.Component);
+  }(_react.Component), _class.defaultProps = {
-  BigData.defaultProps = defaultProps;
+    data: undefined
-  BigData.propTypes = propTypes;
+    // height: 40, //默认行高
+  }, _initialiseProps = function _initialiseProps() {
+    var _this2 = this;
+
+    this.handleScroll = function (scrollTop) {
+      console.log('scrollTop----' + scrollTop);
+      var _props = _this2.props,
+          data = _props.data,
+          height = _props.height;
+
+      var rowHeight = height ? height : defaultHeight;
+      var rowsInView = _this2.rowsInView;
+      var _state$currentIndex = _this2.state.currentIndex,
+          currentIndex = _state$currentIndex === undefined ? 0 : _state$currentIndex;
+      // let index = currentIndex;
+
+      var index = 0;
+      // let temp = scrollTop - this.lastScrollTop;
+      var temp = scrollTop;
+      // let lastScrollTop = scrollTop;
+
+      while (temp > 0) {
+        temp -= _this2.cachedRowHeight[index] || rowHeight;
+        if (temp > 0) {
+          index += 1;
+        }
+      }
+      //记录上一次滚动的位置，作为缓存用
+      // this.lastScrollTop = lastScrollTop + temp;
+
+      // offset last row
+      // index -= 1
+      console.log(index);
+
+      if (data.length - rowsInView < index) index = data.length - rowsInView;
+      if (index < 0) index = 0;
+
+      if (currentIndex !== index) {
+        _this2.setState({ currentIndex: index, scrollTop: scrollTop });
+      }
+    };
+  }, _temp;
 }
 module.exports = exports["default"];

src/Table.js

@@ -647,7 +647,7 @@ class Table extends Component {
         width = width + contentWidthDiff;
       }
       if (!fixed && c.fixed) {
-        fixedClass = `${this.props.clsPrefix}-row-fixed-columns-in-body`;
+        fixedClass = ` ${this.props.clsPrefix}-row-fixed-columns-in-body`;
       }
       return <col key={c.key} style={{ width: width, minWidth: c.width }} className={fixedClass}/>;
     }));

src/TableCell.js

@@ -66,7 +66,7 @@ class TableCell extends Component{
     }
     //不是固定表格并且当前列是固定，则隐藏当前列
     if(column.fixed && !fixed){
-      className = className+`${clsPrefix}-fixed-columns-in-body`;
+      className = className+` ${clsPrefix}-fixed-columns-in-body`;
     }
     return (
       <td

src/TableHeader.js

@@ -532,7 +532,7 @@ class TableHeader extends Component {
               let canDotDrag = "";
               //主表格下、固定列或者是过滤行中含有固定列时添加该属性
               if (!fixed && (da.fixed || (filterable && index == rows.length - 1 && rows[0][columIndex].fixed)) ) {
-                fixedStyle = `${clsPrefix}-row-fixed-columns-in-body`;
+                fixedStyle = ` ${clsPrefix}-row-fixed-columns-in-body`;
               }
            
               if (lastShowIndex == columIndex) {