优化过滤样式、滚动条问题

build/FilterDropDown.js

@@ -127,7 +127,7 @@ var FilterDropDown = function (_Component) {
         );
         return _react2["default"].createElement(
             'div',
-            null,
+            { className: 'filter-btns' },
             isShowCondition == 'show' && _react2["default"].createElement(
                 _beeDropdown2["default"],
                 {

build/Table.css

@@ -320,7 +320,11 @@
   .u-table-thead .filter-text, .u-table-thead .filter-dropdown, .u-table-thead .filter-date {
     font-weight: normal; }
   .u-table-thead .filter-wrap {
-    display: flex; }
+    display: flex;
+    justify-content: center;
+    align-items: center; }
+    .u-table-thead .filter-wrap .filter-btns {
+      min-width: 58px; }
   .u-table-thead th {
     background: #f7f7f7;
     overflow: hidden;

build/Table.js

@@ -757,9 +757,18 @@ var Table = function (_Component) {
         //显示表头滚动条
         if (headerScroll) {
           if (fixed) {
-            bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
+            //内容少，不用显示滚动条
+            if (this.domWidthDiff <= 0) {
               headStyle.marginBottom = scrollbarWidth + 'px';
+              bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
             } else {
+              innerBodyStyle.overflowX = 'auto';
+            }
+          } else {
+            //内容少，不用显示滚动条
+            if (this.domWidthDiff > 0) {
+              headStyle.overflowX = 'auto';
+            }
             headStyle.marginBottom = '0px';
           }
         } else {

dist/demo.css

@@ -8583,7 +8583,13 @@ ul {
     font-weight: normal; }
   .u-table-thead .filter-wrap {
     display: -ms-flexbox;
-    display: flex; }
+    display: flex;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -ms-flex-align: center;
+    align-items: center; }
+    .u-table-thead .filter-wrap .filter-btns {
+      min-width: 58px; }
   .u-table-thead th {
     background: #f7f7f7;
     overflow: hidden;

dist/demo.js

@@ -11325,9 +11325,18 @@
 	        //显示表头滚动条
 	        if (headerScroll) {
 	          if (fixed) {
-	            bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
+	            //内容少，不用显示滚动条
+	            if (this.domWidthDiff <= 0) {
 	              headStyle.marginBottom = scrollbarWidth + 'px';
+	              bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
 	            } else {
+	              innerBodyStyle.overflowX = 'auto';
+	            }
+	          } else {
+	            //内容少，不用显示滚动条
+	            if (this.domWidthDiff > 0) {
+	              headStyle.overflowX = 'auto';
+	            }
 	            headStyle.marginBottom = '0px';
 	          }
 	        } else {
@@ -50850,7 +50859,7 @@
 	        );
 	        return _react2['default'].createElement(
 	            'div',
-	            null,
+	            { className: 'filter-btns' },
 	            isShowCondition == 'show' && _react2['default'].createElement(
 	                _beeDropdown2['default'],
 	                {

src/FilterDropDown.js

@@ -52,7 +52,7 @@ class FilterDropDown extends Component {
                 <Item key="3">{locale['end']}</Item>
             </Menu>
         );
-        return (<div>
+        return (<div className="filter-btns">
             {isShowCondition == 'show' && <Dropdown
                 trigger={['click']}
                 overlay={dropmenu}

src/Table.js

@@ -662,9 +662,18 @@ class Table extends Component {
         //显示表头滚动条
         if(headerScroll){
           if(fixed){
-            bodyStyle.marginBottom = `-${scrollbarWidth}px`;
+           //内容少，不用显示滚动条
+           if(this.domWidthDiff <= 0){
               headStyle.marginBottom = `${scrollbarWidth}px`;
+              bodyStyle.marginBottom = `-${scrollbarWidth}px`;
             }else{
+              innerBodyStyle.overflowX = 'auto';
+            }
+          }else{
+               //内容少，不用显示滚动条
+               if(this.domWidthDiff > 0){
+                headStyle.overflowX = 'auto';
+              }
             headStyle.marginBottom = `0px`;
           }
         }else{

src/Table.scss

@@ -282,6 +282,11 @@ $table-move-in-color: $bg-color-base;
     }
     .filter-wrap{
       display: flex;
+      justify-content: center;
+      align-items: center;
+      .filter-btns{
+        min-width: 58px;
+      }
     }
     th{
       background: $table-head-background-color;