JavaScript
/
bee-table
3
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
build/Table.js
View File

@ -447,9 +447,17 @@ var Table = function (_Component) {
var bodyH = this.bodyTable.clientHeight; var bodyH = this.bodyTable.clientHeight;
var bodyContentH = this.bodyTable.querySelector('table').clientHeight; var bodyContentH = this.bodyTable.querySelector('table').clientHeight;
var rightBodyTable = this.refs.fixedColumnsBodyRight; var rightBodyTable = this.refs.fixedColumnsBodyRight;
var leftBodyTable = this.refs.fixedColumnsBodyLeft;
var overflowy = bodyContentH <= bodyH ? 'auto' : 'scroll'; var overflowy = bodyContentH <= bodyH ? 'auto' : 'scroll';
this.bodyTable.style.overflowY = overflowy; this.bodyTable.style.overflowY = overflowy;
this.refs.headTable.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); rightBodyTable && (rightBodyTable.style.overflowY = overflowy);
} }
}; };
@ -1065,7 +1073,7 @@ var Table = function (_Component) {
'div', 'div',
{ {
className: clsPrefix + '-header', className: clsPrefix + '-header',
ref: fixed ? null : 'headTable', ref: fixed ? 'fixedHeadTable' : 'headTable',
style: headStyle, style: headStyle,
onMouseOver: this.detectScrollTarget, onMouseOver: this.detectScrollTarget,
onTouchStart: this.detectScrollTarget, onTouchStart: this.detectScrollTarget,

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

23951
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

11
src/Table.js
View File

@ -303,10 +303,19 @@ class Table extends Component {
const bodyH = this.bodyTable.clientHeight; const bodyH = this.bodyTable.clientHeight;
const bodyContentH = this.bodyTable.querySelector('table').clientHeight; const bodyContentH = this.bodyTable.querySelector('table').clientHeight;
const rightBodyTable = this.refs.fixedColumnsBodyRight; const rightBodyTable = this.refs.fixedColumnsBodyRight;
const leftBodyTable = this.refs.fixedColumnsBodyLeft;
const overflowy = bodyContentH <= bodyH ? 'auto':'scroll'; const overflowy = bodyContentH <= bodyH ? 'auto':'scroll';
this.bodyTable.style.overflowY = overflowy; this.bodyTable.style.overflowY = overflowy;
this.refs.headTable.style.overflowY = overflowy; this.refs.headTable.style.overflowY = overflowy;
rightBodyTable && (rightBodyTable.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 = ( headTable = (
<div <div
className={`${clsPrefix}-header`} className={`${clsPrefix}-header`}
ref={fixed ? null : 'headTable'} ref={fixed ? 'fixedHeadTable' : 'headTable'}
style={headStyle} style={headStyle}
onMouseOver={this.detectScrollTarget} onMouseOver={this.detectScrollTarget}
onTouchStart={this.detectScrollTarget} onTouchStart={this.detectScrollTarget}