fix: 解决treetable右侧出现空白的问题

This commit is contained in:
yangchch6 2020-02-10 17:46:54 +08:00
parent 1402f50d18
commit 41a51ce2d4
4 changed files with 20 additions and 20 deletions

View File

@ -410,6 +410,11 @@ var Table = function (_Component) {
// this.bodyTable.scrollTop = nextProps.scrollTop; // this.bodyTable.scrollTop = nextProps.scrollTop;
this.scrollTop = nextProps.scrollTop; this.scrollTop = nextProps.scrollTop;
} }
// fix:模态框中使用table计算的滚动条宽度为0的bug
// fix:表格首次渲染时 display:none再显示时未重新计算导致表行出现错位的bug
if (this.scrollbarWidth <= 0 && this.props.scroll.y) {
this.scrollbarWidth = (0, _utils.measureScrollbar)();
}
if (!nextProps.originWidth) { if (!nextProps.originWidth) {
this.computeTableWidth(); this.computeTableWidth();
this.firstDid = true; //避免重复update this.firstDid = true; //避免重复update
@ -417,11 +422,6 @@ var Table = function (_Component) {
if (nextProps.resetScroll) { if (nextProps.resetScroll) {
this.resetScrollX(); this.resetScrollX();
} }
// fix:模态框中使用table计算的滚动条宽度为0的bug
// fix:表格首次渲染时 display:none再显示时未重新计算导致表行出现错位的bug
if (this.scrollbarWidth <= 0 && this.props.scroll.y) {
this.scrollbarWidth = (0, _utils.measureScrollbar)();
}
// console.log('this.scrollTop**********',this.scrollTop); // console.log('this.scrollTop**********',this.scrollTop);
}; };
@ -694,7 +694,7 @@ var Table = function (_Component) {
} else if (width) { } else if (width) {
width = parseInt(width); width = parseInt(width);
} }
if (lastShowIndex == i && width) { if (!column.fixed && lastShowIndex == i && width) {
width = width + contentWidthDiff; width = width + contentWidthDiff;
} }
var cell = { var cell = {

12
dist/demo.js vendored
View File

@ -37447,6 +37447,11 @@
// this.bodyTable.scrollTop = nextProps.scrollTop; // this.bodyTable.scrollTop = nextProps.scrollTop;
this.scrollTop = nextProps.scrollTop; this.scrollTop = nextProps.scrollTop;
} }
// fix:模态框中使用table计算的滚动条宽度为0的bug
// fix:表格首次渲染时 display:none再显示时未重新计算导致表行出现错位的bug
if (this.scrollbarWidth <= 0 && this.props.scroll.y) {
this.scrollbarWidth = (0, _utils.measureScrollbar)();
}
if (!nextProps.originWidth) { if (!nextProps.originWidth) {
this.computeTableWidth(); this.computeTableWidth();
this.firstDid = true; //避免重复update this.firstDid = true; //避免重复update
@ -37454,11 +37459,6 @@
if (nextProps.resetScroll) { if (nextProps.resetScroll) {
this.resetScrollX(); this.resetScrollX();
} }
// fix:模态框中使用table计算的滚动条宽度为0的bug
// fix:表格首次渲染时 display:none再显示时未重新计算导致表行出现错位的bug
if (this.scrollbarWidth <= 0 && this.props.scroll.y) {
this.scrollbarWidth = (0, _utils.measureScrollbar)();
}
// console.log('this.scrollTop**********',this.scrollTop); // console.log('this.scrollTop**********',this.scrollTop);
}; };
@ -37731,7 +37731,7 @@
} else if (width) { } else if (width) {
width = parseInt(width); width = parseInt(width);
} }
if (lastShowIndex == i && width) { if (!column.fixed && lastShowIndex == i && width) {
width = width + contentWidthDiff; width = width + contentWidthDiff;
} }
var cell = { var cell = {

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -222,6 +222,11 @@ class Table extends Component {
// this.bodyTable.scrollTop = nextProps.scrollTop; // this.bodyTable.scrollTop = nextProps.scrollTop;
this.scrollTop = nextProps.scrollTop; this.scrollTop = nextProps.scrollTop;
} }
// fix:模态框中使用table计算的滚动条宽度为0的bug
// fix:表格首次渲染时 display:none再显示时未重新计算导致表行出现错位的bug
if(this.scrollbarWidth<=0 && this.props.scroll.y){
this.scrollbarWidth = measureScrollbar();
}
if (!nextProps.originWidth) { if (!nextProps.originWidth) {
this.computeTableWidth(); this.computeTableWidth();
this.firstDid = true;//避免重复update this.firstDid = true;//避免重复update
@ -229,11 +234,6 @@ class Table extends Component {
if(nextProps.resetScroll){ if(nextProps.resetScroll){
this.resetScrollX(); this.resetScrollX();
} }
// fix:模态框中使用table计算的滚动条宽度为0的bug
// fix:表格首次渲染时 display:none再显示时未重新计算导致表行出现错位的bug
if(this.scrollbarWidth<=0 && this.props.scroll.y){
this.scrollbarWidth = measureScrollbar();
}
// console.log('this.scrollTop**********',this.scrollTop); // console.log('this.scrollTop**********',this.scrollTop);
@ -245,7 +245,7 @@ class Table extends Component {
if(this.columnManager.isAnyColumnsFixed()) { if(this.columnManager.isAnyColumnsFixed()) {
this.syncFixedTableRowHeight(); this.syncFixedTableRowHeight();
} }
//适应模态框中表格、以及父容器宽度变化的情况 //适应模态框中表格、以及父容器宽度变化的情况
if (typeof (this.props.scroll.x) !== 'number' && this.contentTable.getBoundingClientRect().width !== this.contentDomWidth && this.firstDid) { if (typeof (this.props.scroll.x) !== 'number' && this.contentTable.getBoundingClientRect().width !== this.contentDomWidth && this.firstDid) {
this.computeTableWidth(); this.computeTableWidth();
@ -500,7 +500,7 @@ class Table extends Component {
} else if (width) { } else if (width) {
width = parseInt(width); width = parseInt(width);
} }
if (lastShowIndex == i && width) { if (!column.fixed && lastShowIndex == i && width) {
width = width + contentWidthDiff; width = width + contentWidthDiff;
} }
const cell = { const cell = {