表头横向滚动条根据内容动态显示

This commit is contained in:
izbz wh 2019-05-13 11:28:16 +08:00
parent 6dd1140be4
commit 81f3a77733
11 changed files with 4929 additions and 19639 deletions

View File

@ -447,9 +447,17 @@ var Table = function (_Component) {
var bodyH = this.bodyTable.clientHeight;
var bodyContentH = this.bodyTable.querySelector('table').clientHeight;
var rightBodyTable = this.refs.fixedColumnsBodyRight;
var leftBodyTable = this.refs.fixedColumnsBodyLeft;
var overflowy = bodyContentH <= bodyH ? 'auto' : 'scroll';
this.bodyTable.style.overflowY = overflowy;
this.refs.headTable.style.overflowY = overflowy;
// 没有纵向滚动条时,表头横向滚动条根据内容动态显示
if (overflowy == 'auto') {
this.refs.fixedHeadTable && (this.refs.fixedHeadTable.style.overflowX = 'auto');
rightBodyTable && (rightBodyTable.style.overflowX = 'auto');
leftBodyTable && (leftBodyTable.style.overflowX = 'auto');
}
rightBodyTable && (rightBodyTable.style.overflowY = overflowy);
}
};
@ -1065,7 +1073,7 @@ var Table = function (_Component) {
'div',
{
className: clsPrefix + '-header',
ref: fixed ? null : 'headTable',
ref: fixed ? 'fixedHeadTable' : 'headTable',
style: headStyle,
onMouseOver: this.detectScrollTarget,
onTouchStart: this.detectScrollTarget,

File diff suppressed because one or more lines are too long

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

23951
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -303,10 +303,19 @@ class Table extends Component {
const bodyH = this.bodyTable.clientHeight;
const bodyContentH = this.bodyTable.querySelector('table').clientHeight;
const rightBodyTable = this.refs.fixedColumnsBodyRight;
const leftBodyTable = this.refs.fixedColumnsBodyLeft;
const overflowy = bodyContentH <= bodyH ? 'auto':'scroll';
this.bodyTable.style.overflowY = overflowy;
this.refs.headTable.style.overflowY = overflowy;
rightBodyTable && (rightBodyTable.style.overflowY = overflowy);
// 没有纵向滚动条时,表头横向滚动条根据内容动态显示 待验证
// if(overflowy == 'auto'){
// this.refs.fixedHeadTable && (this.refs.fixedHeadTable.style.overflowX = 'auto');
// rightBodyTable && (rightBodyTable.style.overflowX = 'auto');
// leftBodyTable && (leftBodyTable.style.overflowX = 'auto');
// }
}
}
@ -915,7 +924,7 @@ class Table extends Component {
headTable = (
<div
className={`${clsPrefix}-header`}
ref={fixed ? null : 'headTable'}
ref={fixed ? 'fixedHeadTable' : 'headTable'}
style={headStyle}
onMouseOver={this.detectScrollTarget}
onTouchStart={this.detectScrollTarget}