FilterAble不对齐问题

build/Table.js

@@ -1078,7 +1078,7 @@ var Table = function (_Component) {
         headerHeight = _props7.headerHeight,
         columns = _props7.columns;
 
-    var headRows = this.refs.headTable ? this.refs.headTable.querySelectorAll('thead') : this.refs.bodyTable.querySelectorAll('thead');
+    var headRows = this.refs.headTable ? this.refs.headTable.querySelectorAll('thead tr') : this.refs.bodyTable.querySelectorAll('thead tr');
     var bodyRows = this.refs.bodyTable.querySelectorAll('.' + clsPrefix + '-row') || [];
     var fixedColumnsHeadRowsHeight = [].map.call(headRows, function (row) {
       var height = headerHeight;
@@ -1132,7 +1132,8 @@ var Table = function (_Component) {
         _props8$scroll = _props8.scroll,
         scroll = _props8$scroll === undefined ? {} : _props8$scroll,
         clsPrefix = _props8.clsPrefix,
-        handleScroll = _props8.handleScroll;
+        handleScrollY = _props8.handleScrollY,
+        handleScrollX = _props8.handleScrollX;
     var _refs = this.refs,
         headTable = _refs.headTable,
         bodyTable = _refs.bodyTable,
@@ -1161,6 +1162,9 @@ var Table = function (_Component) {
       if (position) {
         (0, _componentClasses2["default"])(this.contentTable).remove(new RegExp('^' + clsPrefix + '-scroll-position-.+$')).add(clsPrefix + '-scroll-position-' + position);
       }
+      if (handleScrollX) {
+        (0, _utils.debounce)(handleScrollX(e.target.scrollLeft, this.treeType), 300);
+      }
     }
     // console.log('lastScrollTop--'+this.lastScrollTop+'--eventScrollTop--'+ e.target.scrollTop);
     if (scroll.y && this.lastScrollTop != e.target.scrollTop) {
@@ -1174,8 +1178,8 @@ var Table = function (_Component) {
         bodyTable.scrollTop = e.target.scrollTop;
       }
       this.lastScrollTop = e.target.scrollTop;
-      if (handleScroll) {
+      if (handleScrollY) {
-        (0, _utils.debounce)(handleScroll(this.lastScrollTop, this.treeType), 300);
+        (0, _utils.debounce)(handleScrollY(this.lastScrollTop, this.treeType), 300);
       }
     }
 

build/lib/bigData.js

@@ -67,7 +67,9 @@ function bigData(Table) {
     }
 
     BigData.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-      if (nextProps.scroll.y !== this.props.scroll.y) {
+      var props = this.props;
+      if (nextProps.scroll.y !== props.scroll.y) {
+        var rowHeight = nextProps.height ? nextProps.height : defaultHeight;
         var scrollY = nextProps.scroll.y ? parseInt(nextProps.scroll.y) : 0;
         this.rowsInView = scrollY ? Math.ceil(scrollY / rowHeight) : 20;
         this.loadCount = props.loadBuffer ? this.rowsInView + props.loadBuffer * 2 : 26; //一次加载多少数据
@@ -256,7 +258,7 @@ function bigData(Table) {
       return _react2["default"].createElement(Table, _extends({}, this.props, {
         data: data.slice(startIndex, endIndex),
         lazyLoad: lazyLoad,
-        handleScroll: this.handleScroll,
+        handleScrollY: this.handleScrollY,
         scrollTop: scrollTop,
         setRowHeight: this.setRowHeight,
         setRowParentIndex: this.setRowParentIndex,
@@ -271,13 +273,15 @@ function bigData(Table) {
     data: [],
     loadBuffer: 5,
     rowKey: 'key',
-    onExpand: function onExpand() {}
+    onExpand: function onExpand() {},
+
+    scroll: {}
   }, _class.propTypes = {
     loadBuffer: _propTypes2["default"].number
   }, _initialiseProps = function _initialiseProps() {
     var _this5 = this;
 
-    this.handleScroll = function (nextScrollTop, treeType) {
+    this.handleScrollY = function (nextScrollTop, treeType) {
       //树表逻辑
       // 关键点是动态的获取startIndex和endIndex
       // 法子一：子节点也看成普通tr，最开始需要设置一共有多少行，哪行显示哪行不显示如何确定
@@ -449,7 +453,7 @@ function bigData(Table) {
         });
       }
 
-      _this5.props.onExpand(expandState, record);
+      _this.props.onExpand(expandState, record);
     };
   }, _temp;
 }

dist/demo.css

@@ -8452,6 +8452,11 @@ ul {
     word-break: break-all; }
   .u-table tr th:last-child {
     overflow: hidden; }
+  .u-table tr.filterable th {
+    padding-top: 4px;
+    padding-bottom: 4px; }
+    .u-table tr.filterable th .filterContext {
+      height: 35px; }
   .u-table-row-hover {
     background: #e3f2fd; }
   .u-table-scroll {

src/Table.scss

@@ -80,6 +80,15 @@ $checkbox-height:16px;
     th:last-child{ //拖拽tag影响了表格整体宽度
       overflow: hidden;
     }
+    &.filterable{
+      th{
+        padding-top: 4px;
+        padding-bottom: 4px;
+        .filterContext{
+          height: 35px;
+        }
+      }
+    }
   }
   &-row-hover {
     background: rgb(227, 242, 253);

src/TableHeader.js

@@ -535,7 +535,6 @@ class TableHeader extends Component {
     } = this.props;
 
     let attr = dragborder ? { id: `u-table-drag-thead-${this.theadKey}` } : {};
-
     return (
       <thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' ref={_thead=>this._thead = _thead} >
         {rows.map((row, index) => (
@@ -555,15 +554,23 @@ class TableHeader extends Component {
               if (lastShowIndex == columIndex) {
                 canDotDrag = "th-can-not-drag";
               }
+              const keyTemp = {};
+              //避免key为undefined
+              if(da.dataindex && da.key ===undefined ){
+                keyTemp.key = da.dataindex
+              } 
               if (filterable && index == rows.length - 1) {
                 da.children = this.filterRenderType(
                   da["filtertype"],
                   da.dataindex,
                   columIndex
                 );
-                delete da.filterdropdownfocus;
+                if(da.key ===undefined ){
+                  keyTemp.key = da.dataindex+'-filterable'
                 }
                 
+                delete da.filterdropdownfocus;
+              }
               let thDefaultObj = {};
               let thClassName = `${da.className}`?`${da.className}`:'';
                   if(draggable){
@@ -574,11 +581,7 @@ class TableHeader extends Component {
                   }
                   thClassName += ` ${fixedStyle}`;
                 if(!da.fixed){
-                  const keyTemp = {};
+             
-                  //避免key为undefined
-                  if(da.dataindex){
-                    keyTemp.key = da.dataindex
-                  } 
                   
                   return (<th {...da}  {...keyTemp} className={thClassName} data-th-fixed={da.fixed} 
                         data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} >

src/lib/bigData.js

@@ -10,6 +10,7 @@ export default function bigData(Table) {
       loadBuffer: 5,
       rowKey: 'key',
       onExpand() { },
+      scroll:{}
     };
     static propTypes = {
       loadBuffer: PropTypes.number
@@ -41,7 +42,9 @@ export default function bigData(Table) {
       this.setRowParentIndex = this.setRowParentIndex.bind(this);
     }
     componentWillReceiveProps(nextProps){
-        if(nextProps.scroll.y !== this.props.scroll.y){
+        const props = this.props; 
+        if(nextProps.scroll.y !== props.scroll.y){
+            const rowHeight = nextProps.height ? nextProps.height : defaultHeight;
             const scrollY = nextProps.scroll.y ? parseInt(nextProps.scroll.y) : 0;
             this.rowsInView = scrollY ? Math.ceil(scrollY / rowHeight) : 20;
             this.loadCount = props.loadBuffer