feat(Table.js): 新增footerScroll参数来让表尾和表体公用同一个横向滚动条

README.md

@@ -88,6 +88,7 @@ class Demo extends Component {
 | expandedRowRender      | 额外的展开行                                   | Function                               | -               |
 | expandIconAsCell      | 展开按钮是否单独作为一个单元格                                   | bool                               | false               |
 | expandRowByClick       | 设置展开行是否通过点击行触发，此参数需要与上面参数搭配使用（默认是通过点击行前面的加号展开行 | bool                                   | false           |
+| footerScroll       | 表尾和body是否公用同一个横向滚动条。（ 如果footer中也是一个table组件，并且也具有滚动条，那么也需要加入footerScroll参数。 ） | bool                                   | false           |
 *注意: 一旦使用了expandedRowRender参数，data参数中的key属性必须设置。否则会导致无法展开！*
 
 ### Column

docs/api.md

@@ -46,6 +46,7 @@ import 'bee-table/build/Table.css';
 | expandedRowRender      | 额外的展开行                                   | Function                               | -               |
 | expandIconAsCell      | 展开按钮是否单独作为一个单元格                                   | bool                               | false               |
 | expandRowByClick       | 设置展开行是否通过点击行触发，此参数需要与上面参数搭配使用（默认是通过点击行前面的加号展开行 | bool                                   | false           |
+| footerScroll       | 表尾和body是否公用同一个横向滚动条。（ 如果footer中也是一个table组件，并且也具有滚动条，那么也需要加入footerScroll参数。 ） | bool                                   | false           |
 *注意: 一旦使用了expandedRowRender参数，data参数中的key属性必须设置。否则会导致无法展开！*
 
 ### Column

src/Table.js

@@ -446,7 +446,7 @@ class Table extends Component{
 
   getTable(options = {}) {
     const { columns, fixed } = options;
-    const { clsPrefix, scroll = {}, getBodyWrapper } = this.props;
+    const { clsPrefix, scroll = {}, getBodyWrapper, footerScroll } = this.props;
     let { useFixedHeader } = this.props;
     const bodyStyle = { ...this.props.bodyStyle };
     const headStyle = {};
@@ -454,8 +454,10 @@ class Table extends Component{
     let tableClassName = '';
     if (scroll.x || fixed) {
       tableClassName = `${clsPrefix}-fixed`;
+      if(!footerScroll){
         bodyStyle.overflowX = bodyStyle.overflowX || 'auto';
       }
+    }
 
     if (scroll.y) {
       // maxHeight will make fixed-Table scrolling not working
@@ -470,7 +472,7 @@ class Table extends Component{
 
       // Add negative margin bottom for scroll bar overflow bug
       const scrollbarWidth = measureScrollbar();
-      if (scrollbarWidth > 0) {
+      if (scrollbarWidth >= 0) {
         (fixed ? bodyStyle : headStyle).marginBottom = `-${scrollbarWidth}px`;
         (fixed ? bodyStyle : headStyle).paddingBottom = '0px';
       }

src/Table.scss

@@ -20,7 +20,9 @@ $table-move-in-color: $bg-color-base;
   position: relative;
   line-height: $line-height;
   overflow: hidden;
-
+  &-body{
+    // overflow: hidden!important;
+  }
   table {
     width: 100%;
     border-collapse: collapse;
@@ -84,10 +86,13 @@ $table-move-in-color: $bg-color-base;
     background: #fff;
     position: relative;
   }
+  &-fixed-left &-body-inner {
+    margin-right: -20px;
+  }
 
   &-fixed-header &-body-inner {
     height: 100%;
-    overflow-y: hidden;
+    overflow: scroll;
   }
 
   &-fixed-header &-scroll &-header {
@@ -110,6 +115,9 @@ $table-move-in-color: $bg-color-base;
   &-footer {
     padding: $vertical-padding $horizontal-padding;
     border-bottom: 1px solid $table-border-color;
+    .u-table-scroll{
+      overflow-x: hidden;
+    }
   }
   &-footer & {
     margin: (-$vertical-padding) (-$horizontal-padding);
@@ -211,7 +219,7 @@ $table-move-in-color: $bg-color-base;
   &-fixed-left {
     left: 0;
     box-shadow: 4px 0 4px rgba(100, 100, 100, 0.1);
-    & &-body-inner {
+    &-body-inner {
       margin-right: -20px;
       padding-right: 20px;
     }
@@ -232,11 +240,11 @@ $table-move-in-color: $bg-color-base;
     }
   }
 
-  & &-scroll-position-left &-fixed-left {
+  &-scroll-position-left &-fixed-left {
     box-shadow: none;
   }
 
-  & &-scroll-position-right &-fixed-right {
+  &-scroll-position-right &-fixed-right {
     box-shadow: none;
   }
 }

src/lib/multiSelect.js

@@ -124,7 +124,6 @@ export default function multiSelect(Table) {
             ),
             key: "checkbox",
             dataIndex: "checkbox",
-            width: "5%",
             render: (text, record, index) => {
               return (
                 <Checkbox

src/lib/sum.js

@@ -51,7 +51,7 @@ export default function sum(Table) {
         }
         return item;
       });
-      return <Table showHeader={false} columns={columns_sum} data={obj} />;
+      return <Table{...this.props} showHeader={false} columns={columns_sum} data={obj} />;
     };
     render() {
       return (