fix: 嵌套表格兼容问题

This commit is contained in:
izbz wh 2020-12-01 21:04:38 +08:00
parent 34e748e5b4
commit aaed13e959
4 changed files with 319 additions and 330 deletions

File diff suppressed because one or more lines are too long

626
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

@ -251,7 +251,7 @@ class Table extends Component {
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
// todo: IE 大数据渲染,行高不固定,且设置了 heightConsistent={true} 时,滚动加载操作会导致 ie11 浏览器崩溃 // todo: IE 大数据渲染,行高不固定,且设置了 heightConsistent={true} 时,滚动加载操作会导致 ie11 浏览器崩溃
// https://github.com/tinper-bee/bee-table/commit/bd2092cdbaad236ff89477304e58dea93325bf09 // https://github.com/tinper-bee/bee-table/commit/bd2092cdbaad236ff89477304e58dea93325bf09
if(this.columnManager.isAnyColumnsFixed()) { if(this.columnManager.isAnyColumnsFixed() && !prevProps.height) {
this.syncFixedTableRowHeight(); this.syncFixedTableRowHeight();
} }
@ -1219,7 +1219,7 @@ class Table extends Component {
if(headerHeight){ if(headerHeight){
height = (getMaxColChildrenLength(columns)+1)*headerHeight; height = (getMaxColChildrenLength(columns)+1)*headerHeight;
} }
return headerHeight ? height : (row.getBoundingClientRect().height || 'auto')} return headerHeight ? height : (parseInt(row.getBoundingClientRect().height) || 'auto')}
); );
const fixedColumnsBodyRowsHeight = [].map.call( const fixedColumnsBodyRowsHeight = [].map.call(
bodyRows, (row,index) =>{ bodyRows, (row,index) =>{
@ -1231,13 +1231,13 @@ class Table extends Component {
// 内容折行显示,并又设置了 height 的情况下,也要获取主表高度 // 内容折行显示,并又设置了 height 的情况下,也要获取主表高度
if(heightConsistent || (!bodyDisplayInRow && rsHeight)){ if(heightConsistent || (!bodyDisplayInRow && rsHeight)){
let leftHeight,rightHeight,currentHeight,maxHeight; let leftHeight,rightHeight,currentHeight,maxHeight;
leftHeight = leftBodyRows[index]?leftBodyRows[index].getBoundingClientRect().height:0; leftHeight = leftBodyRows[index]?parseInt(leftBodyRows[index].getBoundingClientRect().height):0;
rightHeight = rightBodyRows[index]?rightBodyRows[index].getBoundingClientRect().height:0; rightHeight = rightBodyRows[index]?parseInt(rightBodyRows[index].getBoundingClientRect().height):0;
currentHeight = row.getBoundingClientRect().height currentHeight = parseInt(row.getBoundingClientRect().height)
maxHeight = Math.max(leftHeight,rightHeight,currentHeight); maxHeight = Math.max(leftHeight,rightHeight,currentHeight);
return maxHeight || 'auto' return maxHeight || 'auto'
}else{ }else{
return row.getBoundingClientRect().height || 'auto' return parseInt(row.getBoundingClientRect().height) || 'auto'
} }
} }
} }
@ -1246,22 +1246,23 @@ class Table extends Component {
// expandedRows为NodeList Array.prototype.forEach ie 下报错 对象不支持 “forEach” 方法 // expandedRows为NodeList Array.prototype.forEach ie 下报错 对象不支持 “forEach” 方法
expandedRows.length > 0 && Array.prototype.forEach.call(expandedRows,row => { expandedRows.length > 0 && Array.prototype.forEach.call(expandedRows,row => {
let parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key"), let parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key"),
height = row && row.getBoundingClientRect().height || 'auto'; height = row && parseInt(row.getBoundingClientRect().height) || 'auto';
try {//子表数据减少时,动态计算高度 try {//子表数据减少时,动态计算高度
let td = row.querySelector('td'); let td = row.querySelector('td');
let tdPadding = this.getTdPadding(td); let tdPadding = this.getTdPadding(td);
let trueheight = row.querySelectorAll('.u-table')[0].getBoundingClientRect().height; let trueheight = parseInt(row.querySelectorAll('.u-table')[0].getBoundingClientRect().height);
height = trueheight+tdPadding; height = trueheight+tdPadding;
} catch (error) { } catch (error) {
} }
fixedColumnsExpandedRowsHeight[parentRowKey] = height; fixedColumnsExpandedRowsHeight[parentRowKey] = parseInt(height);
}) })
if (shallowequal(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && if (shallowequal(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) &&
shallowequal(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight) && shallowequal(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight) &&
shallowequal(this.state.fixedColumnsExpandedRowsHeight, fixedColumnsExpandedRowsHeight)) { shallowequal(this.state.fixedColumnsExpandedRowsHeight, fixedColumnsExpandedRowsHeight)) {
return; return;
} }
this.setState({ this.setState({
fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight,
fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight,