fix: 表格横向滚动条拖拽时右侧固定列style

This commit is contained in:
izbz wh 2020-11-24 17:05:55 +08:00
parent 36c309303a
commit 3acd6ea33e
5 changed files with 325 additions and 303 deletions

View File

@ -122,7 +122,8 @@ var propTypes = {
bodyDisplayInRow: _propTypes2["default"].bool, // 表格内容超出列宽度时进行换行 or 以...形式展现 bodyDisplayInRow: _propTypes2["default"].bool, // 表格内容超出列宽度时进行换行 or 以...形式展现
headerDisplayInRow: _propTypes2["default"].bool, // 表头内容超出列宽度时进行换行 or 以...形式展现 headerDisplayInRow: _propTypes2["default"].bool, // 表头内容超出列宽度时进行换行 or 以...形式展现
showRowNum: _propTypes2["default"].oneOfType([_propTypes2["default"].bool, _propTypes2["default"].object]), // 表格是否自动生成序号,格式为{base:number || 0,defaultKey:string || '_index',defaultName:string || '序号'} showRowNum: _propTypes2["default"].oneOfType([_propTypes2["default"].bool, _propTypes2["default"].object]), // 表格是否自动生成序号,格式为{base:number || 0,defaultKey:string || '_index',defaultName:string || '序号'}
onPaste: _propTypes2["default"].func onPaste: _propTypes2["default"].func,
onBodyMouseLeave: _propTypes2["default"].func
}; };
var defaultProps = { var defaultProps = {
@ -288,12 +289,20 @@ var Table = function (_Component) {
return Number(tdPaddingTop.replace('px', '')) + Number(tdPaddingBottom.replace('px', '')) + Number(tdBorderTop.replace('px', '')) + Number(tdBorderBottom.replace('px', '')); return Number(tdPaddingTop.replace('px', '')) + Number(tdPaddingBottom.replace('px', '')) + Number(tdBorderTop.replace('px', '')) + Number(tdBorderBottom.replace('px', ''));
}; };
_this.clearBodyMouseLeaveTimer = function () {
if (_this.bodyMouseLeaveTimmer) {
clearTimeout(_this.bodyMouseLeaveTimmer);
_this.bodyMouseLeaveTimmer = null;
}
};
_this.onRowHoverMouseEnter = function () { _this.onRowHoverMouseEnter = function () {
_this.store.setState({ _this.store.setState({
currentHoverKey: _this.currentHoverKey currentHoverKey: _this.currentHoverKey
}); });
_this.hoverDom.style.display = 'block'; _this.hoverDom.style.display = 'block';
_this.clearBodyMouseLeaveTimer();
}; };
_this.onRowHoverMouseLeave = function () {}; _this.onRowHoverMouseLeave = function () {};
@ -373,7 +382,7 @@ var Table = function (_Component) {
_this.tableUid = null; _this.tableUid = null;
_this.contentTable = null; _this.contentTable = null;
_this.leftColumnsLength; //左侧固定列的长度 _this.leftColumnsLength; //左侧固定列的长度
_this.centerColumnsLength; //非固定列的长度 _this.centerColumnsLength; //非固定列的长度
_this.columnsChildrenList = []; //复杂表头、所有叶子节点 _this.columnsChildrenList = []; //复杂表头、所有叶子节点
return _this; return _this;
} }
@ -1500,6 +1509,15 @@ var Table = function (_Component) {
Table.prototype.onBodyMouseLeave = function onBodyMouseLeave(e) { Table.prototype.onBodyMouseLeave = function onBodyMouseLeave(e) {
this.hideHoverDom(e); this.hideHoverDom(e);
var onBodyMouseLeave = this.props.onBodyMouseLeave;
if (typeof onBodyMouseLeave === 'function') {
this.clearBodyMouseLeaveTimer();
//因为鼠标移动到 hoverContent 中也会触发 onBodyMouseLeave这是错误的
//所以讲 onBodyMouseLeave 回调的调用放入 setTimeout中
// 当触发 hoverContent 的 onRowHoverMouseEnter 回调时,清除此定时器
this.bodyMouseLeaveTimmer = setTimeout(onBodyMouseLeave, 0);
}
}; };
Table.prototype.detectScrollTarget = function detectScrollTarget(e) { Table.prototype.detectScrollTarget = function detectScrollTarget(e) {
@ -1541,7 +1559,7 @@ var Table = function (_Component) {
} }
if (e.target.scrollLeft === 0) { if (e.target.scrollLeft === 0) {
position = 'left'; position = 'left';
} else if (e.target.scrollLeft + 1 >= e.target.children[0].getBoundingClientRect().width - e.target.getBoundingClientRect().width) { } else if (e.target.scrollLeft + 1 >= e.target.querySelector('table').getBoundingClientRect().width - e.target.getBoundingClientRect().width) {
position = 'right'; position = 'right';
} else if (this.state.scrollPosition !== 'middle') { } else if (this.state.scrollPosition !== 'middle') {
position = 'middle'; position = 'middle';

View File

@ -117,7 +117,7 @@ function bigData(Table) {
} }
} }
//如果传currentIndex会判断该条数据是否在可视区域如果没有的话则重新计算startIndex和endIndex //如果传currentIndex会判断该条数据是否在可视区域如果没有的话则重新计算startIndex和endIndex
if (currentIndex !== -1 && currentIndex !== this.currentIndex) { if (currentIndex != -1 && currentIndex !== this.currentIndex) {
_this.setStartAndEndIndex(currentIndex, dataLen); _this.setStartAndEndIndex(currentIndex, dataLen);
} }
}; };
@ -258,7 +258,7 @@ function bigData(Table) {
if (this.cachedRowHeight[i] == undefined) { if (this.cachedRowHeight[i] == undefined) {
if (this.treeType) { if (this.treeType) {
// currentKey = this.keys[i]; // currentKey = this.keys[i];
currentKey = this.flatTreeData[i].key; currentKey = this.flatTreeData[i] && this.flatTreeData[i].key;
currentRowHeight = 0; currentRowHeight = 0;
if (this.flatTreeKeysMap.hasOwnProperty(currentKey)) { if (this.flatTreeKeysMap.hasOwnProperty(currentKey)) {
currentRowHeight = rowHeight; currentRowHeight = rowHeight;

593
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

@ -1103,9 +1103,8 @@ class Table extends Component {
onScroll={this.handleBodyScroll} onScroll={this.handleBodyScroll}
onMouseLeave={this.onBodyMouseLeave} onMouseLeave={this.onBodyMouseLeave}
> >
{renderTable(!useFixedHeader)}
{this.renderDragHideTable()} {this.renderDragHideTable()}
{renderTable(!useFixedHeader)}
</div> </div>
); );
@ -1339,7 +1338,7 @@ class Table extends Component {
if (e.target.scrollLeft === 0) { if (e.target.scrollLeft === 0) {
position='left'; position='left';
} else if (e.target.scrollLeft + 1 >= } else if (e.target.scrollLeft + 1 >=
e.target.children[0].getBoundingClientRect().width - e.target.querySelector('table').getBoundingClientRect().width -
e.target.getBoundingClientRect().width) { e.target.getBoundingClientRect().width) {
position='right'; position='right';
} else if (this.state.scrollPosition !== 'middle') { } else if (this.state.scrollPosition !== 'middle') {