fix: 表格横向滚动条拖拽时右侧固定列style
This commit is contained in:
parent
36c309303a
commit
3acd6ea33e
|
@ -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';
|
||||||
|
|
|
@ -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;
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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') {
|
||||||
|
|
Loading…
Reference in New Issue