fix:滚动场景中的表格合并

This commit is contained in:
izbz wh 2019-07-02 16:35:33 +08:00
parent 5801386bee
commit 52b794d579
6 changed files with 80 additions and 93 deletions

142
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

@ -635,6 +635,7 @@ class Table extends Component {
} }
const lazyCurrentIndex = props.lazyLoad && props.lazyLoad.startIndex ?props.lazyLoad.startIndex :0; const lazyCurrentIndex = props.lazyLoad && props.lazyLoad.startIndex ?props.lazyLoad.startIndex :0;
const lazyParentIndex = props.lazyLoad && props.lazyLoad.startParentIndex ?props.lazyLoad.startParentIndex :0; const lazyParentIndex = props.lazyLoad && props.lazyLoad.startParentIndex ?props.lazyLoad.startParentIndex :0;
const lazyEndIndex = props.lazyLoad && props.lazyLoad.endIndex ?props.lazyLoad.endIndex :-1;
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
let isHiddenExpandIcon; let isHiddenExpandIcon;
const record = data[i]; const record = data[i];
@ -738,6 +739,8 @@ class Table extends Component {
tableUid = {this.tableUid} tableUid = {this.tableUid}
expandedIcon={props.expandedIcon} expandedIcon={props.expandedIcon}
collapsedIcon={props.collapsedIcon} collapsedIcon={props.collapsedIcon}
lazyStartIndex = {lazyCurrentIndex}
lazyEndIndex = {lazyEndIndex}
/> />
); );
this.treeRowIndex++; this.treeRowIndex++;

View File

@ -30,7 +30,7 @@ class TableCell extends Component{
} }
render() { render() {
const { record, indentSize, clsPrefix, indent, const { record, indentSize, clsPrefix, indent,
index, expandIcon, column ,fixed,showSum, bodyDisplayInRow} = this.props; index, expandIcon, column ,fixed,showSum, bodyDisplayInRow,lazyStartIndex,lazyEndIndex} = this.props;
const { dataIndex, render } = column; const { dataIndex, render } = column;
let {className = ''} = column; let {className = ''} = column;
@ -43,9 +43,10 @@ class TableCell extends Component{
text = render(text, record, index); text = render(text, record, index);
if (this.isInvalidRenderCellText(text)) { if (this.isInvalidRenderCellText(text)) {
tdProps = text.props || {}; tdProps = text.props || {};
rowSpan = tdProps.rowSpan; rowSpan = (tdProps.rowSpan>lazyEndIndex && lazyEndIndex>5)?lazyEndIndex-index:tdProps.rowSpan;
colSpan = tdProps.colSpan; colSpan = tdProps.colSpan;
text = text.children; text = text.children;
console.log("rowIndex====",index,"rowSpan=======",rowSpan,lazyEndIndex);
} }
} }
@ -61,9 +62,13 @@ class TableCell extends Component{
/> />
) : null; ) : null;
if (rowSpan === 0 || colSpan === 0) { if ((lazyStartIndex !==index) &&(rowSpan === 0 || colSpan === 0) ) {
return null; return null;
} }
if(tdProps && tdProps.mergeEndIndex && index<tdProps.mergeEndIndex && rowSpan === 0){
rowSpan = tdProps.mergeEndIndex - index;
text = ''
}
//不是固定表格并且当前列是固定,则隐藏当前列 //不是固定表格并且当前列是固定,则隐藏当前列
if(column.fixed && !fixed){ if(column.fixed && !fixed){
className = className+` ${clsPrefix}-fixed-columns-in-body`; className = className+` ${clsPrefix}-fixed-columns-in-body`;
@ -80,7 +85,8 @@ class TableCell extends Component{
rowSpan={rowSpan} rowSpan={rowSpan}
className={className} className={className}
onClick={this.handleClick} onClick={this.handleClick}
title = {title} title={title}
> >
{indentText} {indentText}
{expandIcon} {expandIcon}

View File

@ -418,7 +418,7 @@ class TableRow extends Component{
clsPrefix, columns, record, height, visible, index, clsPrefix, columns, record, height, visible, index,
expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,rowDraggAble, expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,rowDraggAble,
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,bodyDisplayInRow expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,bodyDisplayInRow
,expandedIcon,collapsedIcon, hoverKey ,expandedIcon,collapsedIcon, hoverKey,lazyStartIndex,lazyEndIndex
} = this.props; } = this.props;
let showSum = false; let showSum = false;
let { className } = this.props; let { className } = this.props;
@ -471,6 +471,8 @@ class TableRow extends Component{
showSum={showSum} showSum={showSum}
expandIcon={(isColumnHaveExpandIcon) ? expandIcon : null} expandIcon={(isColumnHaveExpandIcon) ? expandIcon : null}
bodyDisplayInRow = {bodyDisplayInRow} bodyDisplayInRow = {bodyDisplayInRow}
lazyStartIndex={lazyStartIndex}
lazyEndIndex={lazyEndIndex}
/> />
); );
} }

View File

@ -1,7 +1,7 @@
import React, { Component } from "react"; import React, { Component } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
const defaultHeight = 30; const defaultHeight = 30;
const rowDiff = 3; //行差值 const rowDiff = 2; //行差值
let treeTypeIndex = 0; let treeTypeIndex = 0;
export default function bigData(Table) { export default function bigData(Table) {
return class BigData extends Component { return class BigData extends Component {
@ -298,11 +298,12 @@ export default function bigData(Table) {
// 向下滚动 下临界值超出缓存的endIndex则重新渲染 // 向下滚动 下临界值超出缓存的endIndex则重新渲染
if (rowsInView + index > endIndex - rowDiff && isOrder) { if (rowsInView + index > endIndex - rowDiff && isOrder) {
startIndex = index - loadBuffer > 0 ? index - loadBuffer : 0; startIndex = index - loadBuffer > 0 ? index - loadBuffer : 0;
// endIndex = startIndex + rowsInView + loadBuffer*2;
endIndex = startIndex + loadCount; endIndex = startIndex + loadCount;
if (endIndex > data.length) { if (endIndex > data.length) {
endIndex = data.length; endIndex = data.length;
} }
if (endIndex !== this.endIndex) { if (endIndex > this.endIndex ) {
this.startIndex = startIndex; this.startIndex = startIndex;
this.endIndex = endIndex; this.endIndex = endIndex;
this.setState({ needRender: !needRender }); this.setState({ needRender: !needRender });
@ -314,7 +315,7 @@ export default function bigData(Table) {
if (startIndex < 0) { if (startIndex < 0) {
startIndex = 0; startIndex = 0;
} }
if (startIndex !== this.startIndex ) { if (startIndex < this.startIndex) {
this.startIndex = startIndex; this.startIndex = startIndex;
this.endIndex = this.startIndex + loadCount; this.endIndex = this.startIndex + loadCount;
this.setState({ needRender: !needRender }); this.setState({ needRender: !needRender });
@ -430,6 +431,7 @@ export default function bigData(Table) {
} }
const lazyLoad = { const lazyLoad = {
startIndex: startIndex, startIndex: startIndex,
endIndex:endIndex,
startParentIndex: startIndex //为树状节点做准备 startParentIndex: startIndex //为树状节点做准备
}; };
if (this.treeType) { if (this.treeType) {