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

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(
'div',
null,
{ className: 'filter-btns' },
isShowCondition == 'show' && _react2["default"].createElement(
_beeDropdown2["default"],
{

View File

@ -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;

View File

@ -757,9 +757,18 @@ var Table = function (_Component) {
//显示表头滚动条
if (headerScroll) {
if (fixed) {
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
headStyle.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 {

8
dist/demo.css vendored
View File

@ -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;

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

15
dist/demo.js vendored
View File

@ -11325,9 +11325,18 @@
//显示表头滚动条
if (headerScroll) {
if (fixed) {
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
headStyle.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'],
{

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>
</Menu>
);
return (<div>
return (<div className="filter-btns">
{isShowCondition == 'show' && <Dropdown
trigger={['click']}
overlay={dropmenu}

View File

@ -662,9 +662,18 @@ class Table extends Component {
//显示表头滚动条
if(headerScroll){
if(fixed){
bodyStyle.marginBottom = `-${scrollbarWidth}px`;
headStyle.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{

View File

@ -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;