p47502813
/
bee-table
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: 综合修改

This commit is contained in:
gx 2021-04-29 15:30:12 +08:00
parent 954266184b
commit 3016f23f31
3 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
build/Table.js
View File

@ -548,9 +548,6 @@ var Table = function (_Component) {
this.isShowScrollY();
if (this.bodyTable) {
var currentOverflowX = window.getComputedStyle(this.bodyTable).overflowX;
if (!this.props.scroll.x && currentOverflowX === 'scroll') {
this.bodyTable.style.overflowX = 'hidden';
}
if (this.props.scroll.x && currentOverflowX !== 'scroll') {
// 此处应该对比一下实际的
if (this.computeWidth > this.contentDomWidth) {
@ -558,6 +555,14 @@ var Table = function (_Component) {
}
}
}
var scrollContainerWidth = window.getComputedStyle(this.bodyTableOuter.querySelector('.scroll-container')).width; // scroll-container层元素的宽度
var scrollContainerTableWidth = this.bodyTableOuter.querySelector('.table-bordered').style.width; // scroll-container内层table元素的宽度
// 有左右固定列时，scroll-container因为有竖直滚动条，使得scroll-container实际宽度（不包括滚动条的宽度）小于内部table宽度出现水平方向滚动条，导致滚动到底部不对齐
if (parseFloat(scrollContainerWidth) >= parseFloat(scrollContainerTableWidth) && (this.columnManager.leftLeafColumns().length > 0 || this.columnManager.rightLeafColumns().length > 0)) {
this.bodyTable.style.overflowX = 'hidden';
} else {
this.bodyTable.style.overflowX = 'auto';
}
if (this.bodyTableOuter) {
// 隐藏几个不需要真正滚动的父元素的滚动条
this.bodyTableOuter.style.overflowY = 'hidden';
@ -1304,9 +1309,10 @@ var Table = function (_Component) {
} else {
if (this.computeWidth > this.contentDomWidth) {
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
var userAgent = navigator.userAgent; // 火狐浏览器，固定表格跟随resize事件产生的滚动条隐藏
var userAgent = navigator.userAgent; // 火狐，IE浏览器，固定表格跟随resize事件产生的滚动条隐藏
var isFF = userAgent.indexOf("Firefox") > -1;
if (isFF) {
var isIE = !!window.ActiveXObject || "ActiveXObject" in window;
if (isFF || isIE) {
// innerBodyStyle.overflowX = 'hidden';
delete innerBodyStyle.overflowX;
}

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bee-table",
"version": "2.3.15-beta.26",
"version": "2.3.15-beta.27",
"description": "Table ui component for react",
"keywords": [
"react",

18
src/Table.js
View File

@ -314,9 +314,6 @@ class Table extends Component {
this.isShowScrollY();
if (this.bodyTable) {
const currentOverflowX = window.getComputedStyle(this.bodyTable).overflowX;
if (!this.props.scroll.x && currentOverflowX === 'scroll') {
this.bodyTable.style.overflowX = 'hidden';
}
if (this.props.scroll.x && currentOverflowX !== 'scroll') {
// 此处应该对比一下实际的
if (this.computeWidth > this.contentDomWidth) {
@ -324,6 +321,14 @@ class Table extends Component {
}
}
}
let scrollContainerWidth = window.getComputedStyle(this.bodyTableOuter.querySelector('.scroll-container')).width; // scroll-container层元素的宽度
let scrollContainerTableWidth = this.bodyTableOuter.querySelector('.table-bordered').style.width; // scroll-container内层table元素的宽度
// 有左右固定列时，scroll-container因为有竖直滚动条，使得scroll-container实际宽度（不包括滚动条的宽度）小于内部table宽度出现水平方向滚动条，导致滚动到底部不对齐
if ((parseFloat(scrollContainerWidth) >= parseFloat(scrollContainerTableWidth)) && (this.columnManager.leftLeafColumns().length > 0 || this.columnManager.rightLeafColumns().length > 0)) {
this.bodyTable.style.overflowX = 'hidden';
} else {
this.bodyTable.style.overflowX = 'auto';
}
if (this.bodyTableOuter) { // 隐藏几个不需要真正滚动的父元素的滚动条
this.bodyTableOuter.style.overflowY = 'hidden'
}
@ -1095,9 +1100,10 @@ class Table extends Component {
}else{
if (this.computeWidth > this.contentDomWidth) {
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
let userAgent = navigator.userAgent; // 火狐浏览器，固定表格跟随resize事件产生的滚动条隐藏
let isFF = userAgent.indexOf("Firefox") > -1;
if (isFF) {
const userAgent = navigator.userAgent; // 火狐，IE浏览器，固定表格跟随resize事件产生的滚动条隐藏
const isFF = userAgent.indexOf("Firefox") > -1;
const isIE = !!window.ActiveXObject || "ActiveXObject" in window
if (isFF || isIE) {
// innerBodyStyle.overflowX = 'hidden';
delete innerBodyStyle.overflowX
}