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 (