diff --git a/README.md b/README.md index e42182b..4cf9bc4 100644 --- a/README.md +++ b/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 diff --git a/docs/api.md b/docs/api.md index 8f4c254..6c63b4b 100644 --- a/docs/api.md +++ b/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 diff --git a/src/Table.js b/src/Table.js index a1d71e2..a7c439d 100644 --- a/src/Table.js +++ b/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,7 +454,9 @@ class Table extends Component{ let tableClassName = ''; if (scroll.x || fixed) { tableClassName = `${clsPrefix}-fixed`; - bodyStyle.overflowX = bodyStyle.overflowX || 'auto'; + if(!footerScroll){ + bodyStyle.overflowX = bodyStyle.overflowX || 'auto'; + } } if (scroll.y) { @@ -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'; } diff --git a/src/Table.scss b/src/Table.scss index 73eeaed..bcf51b9 100644 --- a/src/Table.scss +++ b/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; } } diff --git a/src/lib/multiSelect.js b/src/lib/multiSelect.js index b4e683b..82fa9ea 100644 --- a/src/lib/multiSelect.js +++ b/src/lib/multiSelect.js @@ -124,7 +124,6 @@ export default function multiSelect(Table) { ), key: "checkbox", dataIndex: "checkbox", - width: "5%", render: (text, record, index) => { return ( ; + return ; }; render() { return (