表格合计问题、多表头headerHeight问题

build/Table.css

@@ -222,7 +222,7 @@
     height: 100%;
     overflow: scroll; }
   .u-table-fixed-header .u-table-scroll .u-table-header {
-    overflow-x: auto;
+    overflow-x: scroll;
     padding-bottom: 20px;
     margin-bottom: -20px;
     overflow-y: scroll;

build/Table.js

@@ -390,7 +390,7 @@ var Table = function (_Component) {
       });
     }
 
-    var trStyle = headerHeight ? { height: headerHeight } : fixed ? this.getHeaderRowStyle(columns, rows) : null;
+    var trStyle = headerHeight && !fixed ? { 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;
@@ -922,12 +922,17 @@ var Table = function (_Component) {
     var _props7 = this.props,
         clsPrefix = _props7.clsPrefix,
         height = _props7.height,
-        headerHeight = _props7.headerHeight;
+        headerHeight = _props7.headerHeight,
+        columns = _props7.columns;
 
     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 headerHeight ? headerHeight : row.getBoundingClientRect().height || 'auto';
+      var height = headerHeight;
+      if (headerHeight) {
+        height = ((0, _utils.getMaxColChildrenLength)(columns) + 1) * headerHeight;
+      }
+      return headerHeight ? height : row.getBoundingClientRect().height || 'auto';
     });
     var fixedColumnsBodyRowsHeight = [].map.call(bodyRows, function (row) {
       return height ? height : row.getBoundingClientRect().height || 'auto';

build/TableHeader.js

@@ -387,7 +387,7 @@ var TableHeader = function (_Component) {
       rows.map(function (row, index) {
         return _react2["default"].createElement(
           "tr",
-          { key: index, style: rowStyle },
+          { key: index, style: rowStyle, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
           row.map(function (da, i, arr) {
             var thHover = da.drgHover ? " " + clsPrefix + "-thead th-drag-hover" : "";
             delete da.drgHover;

build/utils.js

@@ -14,6 +14,8 @@ exports.addClass = addClass;
 exports.removeClass = removeClass;
 exports.ObjectAssign = ObjectAssign;
 exports.closest = closest;
+exports.getMaxColChildrenLength = getMaxColChildrenLength;
+exports.getColChildrenLength = getColChildrenLength;
 
 var _warning = require('warning');
 
@@ -162,4 +164,27 @@ function closest(ele, selector) {
     }
   }
   return null;
+}
+
+function getMaxColChildrenLength(columns) {
+  var arr = [];
+  arr = columns.map(function (item, index) {
+    var chilrenLen = 0;
+    if (item.children) {
+      chilrenLen = getColChildrenLength(item.children, chilrenLen + 1);
+    }
+    return chilrenLen;
+  });
+  var max = Math.max.apply(null, arr);
+  return max;
+}
+
+function getColChildrenLength(columns, chilrenLen) {
+  columns.forEach(function (item, index) {
+    if (item.children) {
+      chilrenLen = getColChildrenLength(item.children, chilrenLen + 1);
+    }
+  });
+  console.log(chilrenLen);
+  return chilrenLen;
 }

demo/demolist/Demo3.js

@@ -1,7 +1,8 @@
 /**
  *
- * @title 表头分组
+ * @title 表头分组并自定义表头高度
  * @description columns[n] 可以内嵌 children，以渲染分组表头。
+ * 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响
  *
  */
 
@@ -105,8 +106,10 @@ class Demo3 extends Component {
   render() {
     return (
       <Table
+        className={'demo3'}
         columns={columns}
         data={data}
+        headerHeight={40} //自定义表头高度
         bordered
         scroll={{ y: 240 }}
       />

demo/demolist/Demo3.scss

@@ -0,0 +1,6 @@
+.demo3{
+    .u-table-thead th {
+        padding-top: 0px;
+        padding-bottom: 0px;
+    }
+}

dist/demo.css

@@ -8481,7 +8481,7 @@ ul {
     height: 100%;
     overflow: scroll; }
   .u-table-fixed-header .u-table-scroll .u-table-header {
-    overflow-x: auto;
+    overflow-x: scroll;
     padding-bottom: 20px;
     margin-bottom: -20px;
     overflow-y: scroll;
@@ -10302,4 +10302,8 @@ th .drop-menu .uf {
 th:hover .uf {
   visibility: visible; }
 
+.demo3 .u-table-thead th {
+  padding-top: 0px;
+  padding-bottom: 0px; }
+
 /*# sourceMappingURL=demo.css.map */

src/Table.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import TableRow from './TableRow';
 import TableHeader from './TableHeader';
-import { measureScrollbar, debounce, warningOnce } from './utils';
+import { measureScrollbar, debounce, warningOnce ,getMaxColChildrenLength} from './utils';
 import shallowequal from 'shallowequal';
 import addEventListener from 'tinper-bee-core/lib/addEventListener';
 import ColumnManager from './ColumnManager';
@@ -203,6 +203,9 @@ class Table extends Component {
     
     //如果用户传了scroll.x按用户传的为主
     let setWidthParam = this.props.scroll.x
+    const computeObj = this.columnManager.getColumnWidth(this.contentWidth);
+    let lastShowIndex = computeObj.lastShowIndex;
+    this.computeWidth = computeObj.computeWidth;
     if (typeof (setWidthParam) == 'number') {
       let numSetWidthParam = parseInt(setWidthParam);
       this.contentWidth = numSetWidthParam;
@@ -212,13 +215,12 @@ class Table extends Component {
       this.contentDomWidth = this.contentTable.getBoundingClientRect().width//表格容器宽度
 
       this.contentWidth = this.contentDomWidth;//默认与容器宽度一样
+      this.domWidthDiff = this.contentDomWidth - this.computeWidth;
       if (typeof (setWidthParam) == 'string' && setWidthParam.indexOf('%')) {
         this.contentWidth = this.contentWidth * parseInt(setWidthParam) / 100
       }
     }
-    const computeObj = this.columnManager.getColumnWidth(this.contentWidth);
-    let lastShowIndex = computeObj.lastShowIndex;
-    this.computeWidth = computeObj.computeWidth;
+
     if (this.computeWidth < this.contentWidth) {
       let contentWidthDiff = this.scrollbarWidth?this.contentWidth - this.computeWidth-this.scrollbarWidth:this.contentWidth - this.computeWidth;
       //bordered的表格需要减去边框的差值1
@@ -299,7 +301,7 @@ class Table extends Component {
       });
     }
 
-    const trStyle = headerHeight ? { height: headerHeight } : (fixed ? this.getHeaderRowStyle(columns, rows) : null);
+    const trStyle = headerHeight&&!fixed ? { 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;
@@ -666,7 +668,17 @@ class Table extends Component {
             headStyle.marginBottom = `0px`;
           }
         }else{
-          (fixed ? bodyStyle : headStyle).marginBottom = `-${scrollbarWidth}px`;
+          if(fixed){
+            if(this.domWidthDiff > 0){
+              innerBodyStyle.overflowX = 'auto';
+            }else{
+              bodyStyle.marginBottom = `-${scrollbarWidth}px`;
+            }
+            
+          }else{
+            headStyle.marginBottom = `-${scrollbarWidth}px`;
+          }
+          
         }
       }
     }
@@ -804,13 +816,18 @@ class Table extends Component {
 
   syncFixedTableRowHeight() {
     //this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题
-    const { clsPrefix, height, headerHeight } = this.props;
+    const { clsPrefix, height, headerHeight,columns } = 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 => headerHeight ? headerHeight : (row.getBoundingClientRect().height || 'auto')
+      headRows, row =>{ 
+        let height = headerHeight; 
+        if(headerHeight){
+          height = (getMaxColChildrenLength(columns)+1)*headerHeight;
+        }
+        return headerHeight ? height : (row.getBoundingClientRect().height || 'auto')}
     );
     const fixedColumnsBodyRowsHeight = [].map.call(
       bodyRows, row => height ? height : (row.getBoundingClientRect().height || 'auto')

src/Table.scss

@@ -123,7 +123,7 @@ $table-move-in-color: $bg-color-base;
 
 
   &-fixed-header &-scroll &-header {
-    overflow-x: auto;
+    overflow-x: scroll;
     padding-bottom: 20px;
     margin-bottom: -20px;
     overflow-y: scroll;

src/TableHeader.js

@@ -357,7 +357,7 @@ class TableHeader extends Component {
     return (
       <thead className={`${clsPrefix}-thead`} {...attr}>
         {rows.map((row, index) => (
-          <tr key={index} style={rowStyle}>
+          <tr key={index} style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
             {row.map((da, i, arr) => {
               let thHover = da.drgHover
                 ? ` ${clsPrefix}-thead th-drag-hover`

src/lib/sum.js

@@ -27,29 +27,32 @@ export default function sum(Table) {
     currentFooter = () => {
       let data_2 = this.props.data;
       let columns_sum = this.props.columns.concat();
-      let sumCol_index;
+      let sumCol_index,sumColIndexArr=[];
       //用一个对象存储合计数据，这里合计对象的属性对应每列字段
       for (let i = 0; i < columns_sum.length; i++) {
         if (columns_sum[i].sumCol) {
-          sumCol_index = columns_sum[i].dataIndex;
-          break;
+          sumColIndexArr.push(columns_sum[i].dataIndex);
         }
       }
       let obj = {};
-      obj[sumCol_index] = 0;
-      if (Array.isArray(data_2)) {
-        for (let i = 0; i < data_2.length; i++) {
-          if (
-            typeof data_2[i][sumCol_index] == "number" ||
-            !isNaN(data_2[i][sumCol_index])
-          ) {
-            obj[sumCol_index] -= -data_2[i][sumCol_index];
-          } else {
-            obj[sumCol_index] = "";
+      sumColIndexArr.forEach(sumCol_index=>{
+        
+        obj[sumCol_index] = 0;
+        if (Array.isArray(data_2)) {
+          for (let i = 0; i < data_2.length; i++) {
+            if (
+              typeof data_2[i][sumCol_index] == "number" ||
+              !isNaN(data_2[i][sumCol_index])
+            ) {
+              obj[sumCol_index] -= -data_2[i][sumCol_index];
+            } else {
+              obj[sumCol_index] = "";
+            }
           }
         }
-      }
-      obj.key = "sumData";
+        obj.key = sumCol_index+"sumData";
+        
+      })
       obj.showSum = "合计";
       obj = [obj];
       //将设置的和用户传入的合并属性

src/utils.js

@@ -142,4 +142,27 @@ export function closest(ele, selector) {
     }
   }
   return null;
+}
+
+
+export function getMaxColChildrenLength(columns){
+  let  arr=[];
+  arr = columns.map((item,index)=>{
+    let chilrenLen = 0;
+    if(item.children){
+      chilrenLen = getColChildrenLength(item.children,chilrenLen+1)
+    }
+    return chilrenLen
+  })
+  var max = Math.max.apply(null,arr);
+  return max;
+} 
+
+export function getColChildrenLength(columns,chilrenLen){
+  columns.forEach((item,index)=>{
+    if(item.children){
+      chilrenLen = getColChildrenLength(item.children,chilrenLen+1);
+    }
+  })
+  return chilrenLen;
 }