优化千行固定列

build/Table.js

@@ -244,6 +244,7 @@ var Table = function (_Component) {
   };
 
   Table.prototype.componentDidUpdate = function componentDidUpdate() {
+
     if (this.columnManager.isAnyColumnsFixed()) {
       this.syncFixedTableRowHeight();
     }
@@ -256,19 +257,16 @@ var Table = function (_Component) {
   };
 
   Table.prototype.computeTableWidth = function computeTableWidth() {
-    //计算总表格宽度、根据表格宽度和各列的宽度和比较，重置最后一列
-    this.contentWidth = this.contentTable.clientWidth; //表格宽度
     //如果用户传了scroll.x按用户传的为主
     var setWidthParam = this.props.scroll.x;
-    if (setWidthParam) {
+    if (typeof setWidthParam == 'number') {
+      var numSetWidthParam = parseInt(setWidthParam);
+      this.contentWidth = numSetWidthParam;
+    } else {
+      //计算总表格宽度、根据表格宽度和各列的宽度和比较，重置最后一列
+      this.contentWidth = this.contentTable.getBoundingClientRect().width; //表格宽度
       if (typeof setWidthParam == 'string' && setWidthParam.indexOf('%')) {
         this.contentWidth = this.contentWidth * parseInt(setWidthParam) / 100;
-      } else {
-        var numSetWidthParam = parseInt(setWidthParam);
-        //若传入的宽度小于当前宽度以当前宽度为主。
-        if (numSetWidthParam > this.contentWidth) {
-          this.contentWidth = numSetWidthParam;
-        }
       }
     }
     var computeObj = this.columnManager.getColumnWidth();
@@ -345,7 +343,8 @@ var Table = function (_Component) {
         dragborder = _props.dragborder,
         onThMouseMove = _props.onThMouseMove,
         dragborderKey = _props.dragborderKey,
-        minColumnWidth = _props.minColumnWidth;
+        minColumnWidth = _props.minColumnWidth,
+        headerHeight = _props.headerHeight;
 
     var rows = this.getHeaderRows(columns);
     if (expandIconAsCell && fixed !== 'right') {
@@ -357,7 +356,7 @@ var Table = function (_Component) {
       });
     }
 
-    var trStyle = fixed ? this.getHeaderRowStyle(columns, rows) : null;
+    var trStyle = headerHeight ? { height: headerHeight } : fixed ? this.getHeaderRowStyle(columns, rows) : null;
     var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnter: onDragEnter, draggable: draggable } : {};
     var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, dragborderKey: dragborderKey } : {};
     var contentWidthDiff = 0;
@@ -484,6 +483,7 @@ var Table = function (_Component) {
 
     var rst = [];
     var isHiddenExpandIcon = void 0;
+    var height = void 0;
     var rowClassName = props.rowClassName;
     var rowRef = props.rowRef;
     var expandedRowClassName = props.expandedRowClassName;
@@ -520,7 +520,12 @@ var Table = function (_Component) {
       if (this.treeType) {
         fixedIndex = this.treeRowIndex;
       }
-      var height = fixed && fixedColumnsBodyRowsHeight[fixedIndex] ? fixedColumnsBodyRowsHeight[fixedIndex] : null;
+
+      if (props.fixedHeight) {
+        height = props.fixedHeight;
+      } else {
+        height = fixed && fixedColumnsBodyRowsHeight[fixedIndex] ? fixedColumnsBodyRowsHeight[fixedIndex] : null;
+      }
 
       var leafColumns = void 0;
       if (fixed === 'left') {
@@ -812,6 +817,7 @@ var Table = function (_Component) {
     var fixedColumnsHeadRowsHeight = this.state.fixedColumnsHeadRowsHeight;
 
     var headerHeight = fixedColumnsHeadRowsHeight[0];
+
     if (headerHeight && columns) {
       if (headerHeight === 'auto') {
         return { height: 'auto' };
@@ -822,15 +828,19 @@ var Table = function (_Component) {
   };
 
   Table.prototype.syncFixedTableRowHeight = function syncFixedTableRowHeight() {
-    var clsPrefix = this.props.clsPrefix;
+    //this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题
+    var _props7 = this.props,
+        clsPrefix = _props7.clsPrefix,
+        height = _props7.height,
+        headerHeight = _props7.headerHeight;
 
     var headRows = this.refs.headTable ? this.refs.headTable.querySelectorAll('thead') : this.refs.bodyTable.querySelectorAll('thead');
     var bodyRows = this.refs.bodyTable.querySelectorAll('.' + clsPrefix + '-row') || [];
     var fixedColumnsHeadRowsHeight = [].map.call(headRows, function (row) {
-      return row.getBoundingClientRect().height || 'auto';
+      return headerHeight ? headerHeight : row.getBoundingClientRect().height || 'auto';
     });
     var fixedColumnsBodyRowsHeight = [].map.call(bodyRows, function (row) {
-      return row.getBoundingClientRect().height || 'auto';
+      return height ? height : row.getBoundingClientRect().height || 'auto';
     });
     if ((0, _shallowequal2["default"])(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight)) {
       return;

demo/demolist/Demo1.js

@@ -70,15 +70,21 @@ class Demo1 extends Component {
 
   render() {
     return (
-      <Table
+   
-        columns={columns}
+        <Table
-        data={data}
+          columns={columns}
-        onRowClick={(record, index, indent) => {
+          data={data}
-          this.setState({
+          parentNodeId='parent'
-            selectedRowIndex: index
+          height={43}
-          });
+          headerHeight={42}
-        }}
+          onRowClick={(record, index, indent) => {
-      />
+            this.setState({
+              selectedRowIndex: index
+            });
+          }}
+        />
+
+     
     );
   }
 }

src/Table.js

@@ -166,6 +166,7 @@ class Table extends Component{
   }
 
   componentDidUpdate() {
+    
     if (this.columnManager.isAnyColumnsFixed()) {
       this.syncFixedTableRowHeight();
     }
@@ -178,20 +179,18 @@ class Table extends Component{
   }
 
   computeTableWidth(){
-      //计算总表格宽度、根据表格宽度和各列的宽度和比较，重置最后一列
-      this.contentWidth = this.contentTable.clientWidth//表格宽度
       //如果用户传了scroll.x按用户传的为主
       let setWidthParam = this.props.scroll.x
-      if(setWidthParam){
+      if(typeof(setWidthParam) == 'number'){
-        if(typeof(setWidthParam)=='string' && setWidthParam.indexOf('%')){
+        let numSetWidthParam = parseInt(setWidthParam);
-          this.contentWidth = this.contentWidth * parseInt(setWidthParam) /100
+        this.contentWidth = numSetWidthParam;
-        }else{
+      }else{
-          let numSetWidthParam = parseInt(setWidthParam);
+          //计算总表格宽度、根据表格宽度和各列的宽度和比较，重置最后一列
-          //若传入的宽度小于当前宽度以当前宽度为主。
+          this.contentDomWidth = this.contentTable.getBoundingClientRect().width//表格容器宽度
-          if(numSetWidthParam > this.contentWidth){
+          this.contentWidth = this.contentDomWidth;//默认与容器宽度一样
-            this.contentWidth = numSetWidthParam;
+          if(typeof(setWidthParam)=='string' && setWidthParam.indexOf('%')){
+            this.contentWidth = this.contentWidth * parseInt(setWidthParam) /100
           }
-        }
       }
       const computeObj = this.columnManager.getColumnWidth();
       let lastShowIndex = computeObj.lastShowIndex;
@@ -258,7 +257,7 @@ class Table extends Component{
 
   getHeader(columns, fixed) {
     const { showHeader, expandIconAsCell, clsPrefix ,onDragStart,onDragEnter,onDragOver,onDrop,draggable,
-      onMouseDown,onMouseMove,onMouseUp,dragborder,onThMouseMove,dragborderKey,minColumnWidth} = this.props;
+      onMouseDown,onMouseMove,onMouseUp,dragborder,onThMouseMove,dragborderKey,minColumnWidth,headerHeight} = this.props;
     const rows = this.getHeaderRows(columns);
     if (expandIconAsCell && fixed !== 'right') {
       rows[0].unshift({
@@ -269,7 +268,7 @@ class Table extends Component{
       });
     }
 
-    const trStyle = fixed ? this.getHeaderRowStyle(columns, rows) : null;
+    const trStyle =headerHeight?{height:headerHeight}:(fixed ? this.getHeaderRowStyle(columns, rows) : null);
     let drop = draggable?{onDragStart,onDragOver,onDrop,onDragEnter,draggable}:{};
     let dragBorder = dragborder?{onMouseDown,onMouseMove,onMouseUp,dragborder,onThMouseMove,dragborderKey}:{};
     let contentWidthDiff = 0;
@@ -389,6 +388,7 @@ class Table extends Component{
     const { fixedColumnsBodyRowsHeight } = this.state;
     let rst = [];
     let isHiddenExpandIcon;
+    let height;
     const rowClassName = props.rowClassName;
     const rowRef = props.rowRef;
     const expandedRowClassName = props.expandedRowClassName;
@@ -423,8 +423,13 @@ class Table extends Component{
       if(this.treeType){
         fixedIndex = this.treeRowIndex;
       }
-      const height = (fixed && fixedColumnsBodyRowsHeight[fixedIndex]) ?
+       
-        fixedColumnsBodyRowsHeight[fixedIndex] : null;
+      if(props.fixedHeight){
+        height = props.fixedHeight
+      }else{
+        height =  (fixed && fixedColumnsBodyRowsHeight[fixedIndex]) ? fixedColumnsBodyRowsHeight[fixedIndex] : null;
+      }
+     
 
 
       let leafColumns;
@@ -700,6 +705,7 @@ class Table extends Component{
   getHeaderRowStyle(columns, rows) {
     const { fixedColumnsHeadRowsHeight } = this.state;
     const headerHeight = fixedColumnsHeadRowsHeight[0];
+
     if (headerHeight && columns) {
       if (headerHeight === 'auto') {
         return { height: 'auto' };
@@ -710,16 +716,17 @@ class Table extends Component{
   }
 
   syncFixedTableRowHeight() {
-    const { clsPrefix } = this.props;
+    //this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题
+    const { clsPrefix ,height,headerHeight} = 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 fixedColumnsHeadRowsHeight = [].map.call(
-      headRows, row => row.getBoundingClientRect().height || 'auto'
+      headRows, row => headerHeight?headerHeight:(row.getBoundingClientRect().height || 'auto')
     );
     const fixedColumnsBodyRowsHeight = [].map.call(
-      bodyRows, row => row.getBoundingClientRect().height || 'auto'
+      bodyRows, row =>  height?height:(row.getBoundingClientRect().height || 'auto')
     );
     if (shallowequal(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) &&
         shallowequal(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight)) {