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

122
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 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++) {
let isHiddenExpandIcon;
const record = data[i];
@ -738,6 +739,8 @@ class Table extends Component {
tableUid = {this.tableUid}
expandedIcon={props.expandedIcon}
collapsedIcon={props.collapsedIcon}
lazyStartIndex = {lazyCurrentIndex}
lazyEndIndex = {lazyEndIndex}
/>
);
this.treeRowIndex++;

View File

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

View File

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

View File

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