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

This commit is contained in:
wanghaoo 2018-11-13 14:36:12 +08:00
parent cbcbe0cf00
commit 529d250f4d
10 changed files with 55 additions and 13 deletions

View File

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

View File

@ -320,7 +320,11 @@
.u-table-thead .filter-text, .u-table-thead .filter-dropdown, .u-table-thead .filter-date { .u-table-thead .filter-text, .u-table-thead .filter-dropdown, .u-table-thead .filter-date {
font-weight: normal; } font-weight: normal; }
.u-table-thead .filter-wrap { .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 { .u-table-thead th {
background: #f7f7f7; background: #f7f7f7;
overflow: hidden; overflow: hidden;

View File

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

8
dist/demo.css vendored
View File

@ -8583,7 +8583,13 @@ ul {
font-weight: normal; } font-weight: normal; }
.u-table-thead .filter-wrap { .u-table-thead .filter-wrap {
display: -ms-flexbox; 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 { .u-table-thead th {
background: #f7f7f7; background: #f7f7f7;
overflow: hidden; overflow: hidden;

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

13
dist/demo.js vendored
View File

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

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

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