增加heightConsistent属性，解决固定列内容过长导致行高度不统一问题

build/Table.css

@@ -665,3 +665,25 @@
 .u-row-hover2 {
   position: absolute;
   left: 100; }
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px; }
+
+::-webkit-scrollbar-button {
+  display: none; }
+
+::-webkit-scrollbar-thumb {
+  background: #d5d5d5 !important;
+  border-radius: 5px; }
+
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: #d5d5d5;
+  position: absolute; }
+
+::-webkit-scrollbar-track {
+  display: none; }
+
+::-webkit-scrollbar-track-piece {
+  display: none; }

build/Table.js

@@ -244,7 +244,7 @@ var Table = function (_Component) {
     _this.getEmptyText = _this.getEmptyText.bind(_this);
     _this.getHeaderRowStyle = _this.getHeaderRowStyle.bind(_this);
     _this.syncFixedTableRowHeight = _this.syncFixedTableRowHeight.bind(_this);
-    _this.resetScrollY = _this.resetScrollY.bind(_this);
+    _this.resetScrollX = _this.resetScrollX.bind(_this);
     _this.findExpandedRow = _this.findExpandedRow.bind(_this);
     _this.isRowExpanded = _this.isRowExpanded.bind(_this);
     _this.detectScrollTarget = _this.detectScrollTarget.bind(_this);
@@ -258,7 +258,7 @@ var Table = function (_Component) {
   Table.prototype.componentDidMount = function componentDidMount() {
     _utils.EventUtil.addHandler(this.contentTable, 'keydown', this.onKeyDown);
     _utils.EventUtil.addHandler(this.contentTable, 'focus', this.onFocus);
-    setTimeout(this.resetScrollY, 300);
+    setTimeout(this.resetScrollX, 300);
     //含有纵向滚动条
     if (this.props.scroll.y) {
       this.scrollbarWidth = (0, _utils.measureScrollbar)();
@@ -278,9 +278,6 @@ var Table = function (_Component) {
       this.setState({
         data: nextProps.data
       });
-      if (!nextProps.data || nextProps.data.length === 0) {
-        this.resetScrollY();
-      }
     }
     if ('expandedRowKeys' in nextProps) {
       this.setState({
@@ -305,13 +302,13 @@ var Table = function (_Component) {
       this.firstDid = true; //避免重复update
     }
     if (nextProps.resetScroll) {
-      this.resetScrollY();
+      this.resetScrollX();
     }
 
     // console.log('this.scrollTop**********',this.scrollTop);
   };
 
-  Table.prototype.componentDidUpdate = function componentDidUpdate() {
+  Table.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
 
     if (this.columnManager.isAnyColumnsFixed()) {
       this.syncFixedTableRowHeight();
@@ -327,6 +324,9 @@ var Table = function (_Component) {
       this.refs.bodyTable.scrollTop = this.scrollTop;
       this.scrollTop = -1;
     }
+    if (prevProps.data.length === 0 || this.props.data.length === 0) {
+      this.resetScrollX();
+    }
   };
 
   Table.prototype.componentWillUnmount = function componentWillUnmount() {
@@ -1120,7 +1120,7 @@ var Table = function (_Component) {
     });
   };
 
-  Table.prototype.resetScrollY = function resetScrollY() {
+  Table.prototype.resetScrollX = function resetScrollX() {
     if (this.refs.headTable) {
       this.refs.headTable.scrollLeft = 0;
     }
@@ -1198,7 +1198,7 @@ var Table = function (_Component) {
       }
     }
     // console.log('lastScrollTop--'+this.lastScrollTop+'--eventScrollTop--'+ e.target.scrollTop);
-    if (scroll.y && this.lastScrollTop != e.target.scrollTop) {
+    if (scroll.y && this.lastScrollTop != e.target.scrollTop && e.target !== headTable) {
       if (fixedColumnsBodyLeft && e.target !== fixedColumnsBodyLeft) {
         fixedColumnsBodyLeft.scrollTop = e.target.scrollTop;
       }

demo/demolist/Demo16.js

@@ -7,7 +7,8 @@
 
 import React, { Component } from "react";
 import Table from "../../src";
-
+import dragColumn from '../../src/lib/dragColumn';
+const DragColumnTable = dragColumn(Table);
 const columns16 = [
   {
     title: "操作",
@@ -79,7 +80,7 @@ class Demo16 extends Component {
         columns={columns17}
         style={{height:height}}
         data={this.state.data_obj[record.key]} 
-
+       
       />
     );
   };
@@ -114,12 +115,14 @@ class Demo16 extends Component {
   }
   render() {
     return (
-      <Table
+      <DragColumnTable
         columns={columns16}
         data={data16}
         onExpand={this.getData}
         expandedRowRender={this.expandedRowRender}
         scroll={{x:true}}
+        dragborder={true} 
+        draggable={true} 
         title={currentData => <div>标题: 这是一个标题</div>}
         footer={currentData => <div>表尾: 我是小尾巴</div>}
       />

docs/api.md

@@ -59,6 +59,7 @@ import 'bee-table/build/Table.css';
 | resetScroll       | 将表格横向滚动条位置还原 | bool| false
 | hoverContent       | hover某行时，动态渲染行菜单元素，此方法需返回行菜单元素的内容 | Function| 
 | onRowHover       | 行hover时的回调函数 | Function| 
+| heightConsistent       | 当固定列内容高度超出非固定列时，内容互错行，当此属性为true会将高度同步，当行过多时会有性能影响，所以建议非固定高度如果过高时，超出内容可以显示成省略号 | bool|false 
 
 > 快捷键部分参考示例 (快捷键在table中的简单使用应用)
 

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "1.6.44",
+ "version": "1.6.45.beta.1",
  "description": "Table ui component for react",
  "keywords": [
   "react",

src/Table.js

@@ -84,7 +84,8 @@ const defaultProps = {
   syncHover: true,
   setRowHeight:()=>{},
   setRowParentIndex:()=>{},
-  tabIndex:'0'
+  tabIndex:'0',
+  heightConsistent:false
 };
 
 class Table extends Component {
@@ -132,7 +133,7 @@ class Table extends Component {
     this.getEmptyText = this.getEmptyText.bind(this);
     this.getHeaderRowStyle = this.getHeaderRowStyle.bind(this);
     this.syncFixedTableRowHeight = this.syncFixedTableRowHeight.bind(this);
-    this.resetScrollY = this.resetScrollY.bind(this);
+    this.resetScrollX = this.resetScrollX.bind(this);
     this.findExpandedRow = this.findExpandedRow.bind(this);
     this.isRowExpanded = this.isRowExpanded.bind(this);
     this.detectScrollTarget = this.detectScrollTarget.bind(this);
@@ -145,7 +146,7 @@ class Table extends Component {
   componentDidMount() {
     EventUtil.addHandler(this.contentTable,'keydown',this.onKeyDown);
     EventUtil.addHandler(this.contentTable,'focus',this.onFocus);
-    setTimeout(this.resetScrollY, 300);
+    setTimeout(this.resetScrollX, 300);
     //含有纵向滚动条
     if(this.props.scroll.y){
        this.scrollbarWidth = measureScrollbar();
@@ -168,9 +169,6 @@ class Table extends Component {
       this.setState({
         data: nextProps.data,
       });
-      if (!nextProps.data || nextProps.data.length === 0) {
-        this.resetScrollY();
-      }
     }
     if ('expandedRowKeys' in nextProps) {
       this.setState({
@@ -195,14 +193,14 @@ class Table extends Component {
       this.firstDid = true;//避免重复update
     }
     if(nextProps.resetScroll){
-      this.resetScrollY();
+      this.resetScrollX();
     }
  
     // console.log('this.scrollTop**********',this.scrollTop);
 
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
 
     if (this.columnManager.isAnyColumnsFixed()) {
       this.syncFixedTableRowHeight();
@@ -218,7 +216,9 @@ class Table extends Component {
       this.refs.bodyTable.scrollTop = this.scrollTop;
       this.scrollTop = -1;
     }
-
+    if (prevProps.data.length === 0  || this.props.data.length === 0 ) {
+      this.resetScrollX();
+    }
 
   }
 
@@ -565,7 +565,7 @@ class Table extends Component {
 
       if (props.height) {
         height = props.height
-      } else if(fixed) {
+      } else if(fixed || props.heightConsistent) {
         height = fixedColumnsBodyRowsHeight[fixedIndex];
       }
 
@@ -942,11 +942,13 @@ class Table extends Component {
 
   syncFixedTableRowHeight() {
     //this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题
-    const { clsPrefix, height, headerHeight,columns } = this.props;
+    const { clsPrefix, height, headerHeight,columns,heightConsistent } = this.props;
     const headRows = this.refs.headTable ?
       this.refs.headTable.querySelectorAll('thead') :
       this.refs.bodyTable.querySelectorAll('thead');
     const bodyRows = this.refs.bodyTable.querySelectorAll(`.${clsPrefix}-row`) || [];
+    const leftBodyRows = this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll(`.${clsPrefix}-row`) || [];
+    const rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll(`.${clsPrefix}-row`) || [];
     const fixedColumnsHeadRowsHeight = [].map.call(
       headRows, row =>{ 
         let height = headerHeight; 
@@ -956,8 +958,28 @@ class Table extends Component {
         return headerHeight ? height : (row.getBoundingClientRect().height || 'auto')}
     );
     const fixedColumnsBodyRowsHeight = [].map.call(
-      bodyRows, row => height ? height : (row.getBoundingClientRect().height || 'auto')
+      bodyRows, (row,index) =>{
+        let rsHeight = height;
+        if(rsHeight){
+          return rsHeight;
+        }else{
+          // 为了提高性能，默认获取主表的高度，但是有的场景中固定列的高度比主表的高度高，所以提供此属性，会统计所有列的高度取最大的，设置
+          if(heightConsistent){
+            let leftHeight,rightHeight,currentHeight,maxHeight;
+            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 (shallowequal(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) &&
       shallowequal(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight)) {
       return;
@@ -968,7 +990,7 @@ class Table extends Component {
     });
   }
 
-  resetScrollY() {
+  resetScrollX() {
     if (this.refs.headTable) {
       this.refs.headTable.scrollLeft = 0;
     }

src/TableHeader.js

@@ -275,7 +275,7 @@ class TableHeader extends Component {
   onLineMouseUp = (event) => {
     let width = this.drag.newWidth;
     this.clearDragBorder(event);
-    this.props.onDropBorder(event,width);
+    this.props.onDropBorder && this.props.onDropBorder(event,width);
   };
 
   /**