fix:滚动场景中的表格合并
This commit is contained in:
parent
5801386bee
commit
52b794d579
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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++;
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in New Issue