优化过滤样式、滚动条问题
This commit is contained in:
parent
cbcbe0cf00
commit
529d250f4d
|
@ -127,7 +127,7 @@ var FilterDropDown = function (_Component) {
|
|||
);
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
null,
|
||||
{ className: 'filter-btns' },
|
||||
isShowCondition == 'show' && _react2["default"].createElement(
|
||||
_beeDropdown2["default"],
|
||||
{
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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'],
|
||||
{
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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}
|
||||
|
|
13
src/Table.js
13
src/Table.js
|
@ -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{
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue