fix:滚动加载场景,更新数据源,表体显示空白问题

This commit is contained in:
yangchch6 2019-08-22 14:59:23 +08:00
parent b1ba5b5001
commit 57f742014a
12 changed files with 625 additions and 527 deletions

View File

@ -83,10 +83,10 @@ function bigData(Table) {
_this.startIndex = _this.currentIndex; //数据开始位置 _this.startIndex = _this.currentIndex; //数据开始位置
_this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置 _this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置
} }
if (nextProps.data !== props.data) { if (nextProps.data.toString() !== props.data.toString()) {
//wh fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun) //fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun)
// _this.cachedRowHeight = []; //缓存每行的高度 _this.cachedRowHeight = []; //缓存每行的高度
// _this.cachedRowParentIndex = []; _this.cachedRowParentIndex = [];
_this.computeCachedRowParentIndex(nextProps.data); _this.computeCachedRowParentIndex(nextProps.data);
if (nextProps.data.length > 0) { if (nextProps.data.length > 0) {
_this.endIndex = _this.currentIndex - nextProps.loadBuffer + _this.loadCount; //数据结束位置 _this.endIndex = _this.currentIndex - nextProps.loadBuffer + _this.loadCount; //数据结束位置

View File

@ -7,7 +7,6 @@
*/ */
import React, { Component } from "react"; import React, { Component } from "react";
import {Button,Tooltip} from "tinper-bee";
import Table from "../../src"; import Table from "../../src";
const columns = [ const columns = [

View File

@ -62,16 +62,26 @@ class Demo30 extends Component {
} }
} }
handleClick = () => {
this.setState({
data
})
}
render() { render() {
return ( return (
<div>
<button onClick={this.handleClick}>更新data</button>
<BigDataTable <BigDataTable
columns={columns} columns={columns}
data={data} data={this.state.data}
scroll={{y:300}} scroll={{y:300}}
onRowClick={(record, index, indent) => { onRowClick={(record, index, indent) => {
console.log('currentIndex--'+index); console.log('currentIndex--'+index);
}} }}
/> />
</div>
); );

View File

@ -13,16 +13,54 @@ import BigData from "../../src/lib/bigData";
import multiSelect from '../../src/lib/multiSelect'; import multiSelect from '../../src/lib/multiSelect';
import filterColumn from '../../src/lib/filterColumn'; import filterColumn from '../../src/lib/filterColumn';
let ComplexTable = filterColumn(multiSelect(BigData(Table), Checkbox), Popover, Icon); let ComplexTable = filterColumn(BigData(Table), Popover, Icon);
const columns = [ const columns = [
{
className: 'u-table-multiSelect-column',
title: (
<Checkbox
className="table-checkbox"
/>
),
key: "checkbox",
dataIndex: "checkbox",
fixed:"left",
width: 49,
render: (text, record, index) => {
const obj = {
children: <Checkbox
key={index}
className="table-checkbox"
/>,
props: {},
};
if (index % 50 === 0) {
obj.props.rowSpan = 50;
} else {
obj.props.rowSpan = 0;
}
return obj;
}
},
{ {
title:'序号', title:'序号',
dataIndex:'index', dataIndex:'index',
width:'80', width:'80',
key:'index', key:'index',
fixed:'left',
render:(text,record,index)=>{ render:(text,record,index)=>{
return index // return index
const obj = {
children: index,
props: {},
};
if (index % 50 === 0) {
obj.props.rowSpan = 50;
} else {
obj.props.rowSpan = 0;
}
return obj;
} }
}, },
{ {
@ -46,7 +84,7 @@ const columns = [
{ title: "年龄", dataIndex: "c", key: "c", width: 200 } { title: "年龄", dataIndex: "c", key: "c", width: 200 }
]; ];
const data = [ ...new Array(10000) ].map((e, i) => { const data = [ ...new Array(150) ].map((e, i) => {
const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i }; const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
if(i%3==0){ if(i%3==0){
rs.b = '女'; rs.b = '女';

View File

@ -68,7 +68,7 @@ class DemoGroup extends Component {
render () { render () {
return ( return (
<Row> <Row>
{DemoArray.map((child,index) => { {[DemoArray[39]].map((child,index) => {
return ( return (
<Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/> <Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>

File diff suppressed because one or more lines are too long

2
dist/demo.css vendored
View File

@ -291,7 +291,7 @@
.u-table-fixed-left .u-table-body-inner { .u-table-fixed-left .u-table-body-inner {
margin-right: -20px; margin-right: -20px;
padding-right: 20px; } padding-right: 20px; }
.u-table-fixed-header .u-table-fixed-left .u-table-body-inner { .u-table-fixed-header:not(.u-table-hide-header) .u-table-fixed-left .u-table-body-inner {
padding-right: 0px; } padding-right: 0px; }
.u-table-fixed-header .u-table-body-inner { .u-table-fixed-header .u-table-body-inner {
height: 100%; height: 100%;

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

1065
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

@ -1,6 +1,6 @@
{ {
"name": "bee-table", "name": "bee-table",
"version": "2.1.14", "version": "2.1.15-beta.1",
"description": "Table ui component for react", "description": "Table ui component for react",
"keywords": [ "keywords": [
"react", "react",

View File

@ -60,10 +60,10 @@ export default function bigData(Table) {
_this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置 _this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置
} }
if (nextProps.data !== props.data) { if (nextProps.data.toString() !== props.data.toString()) {
//wh fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun) //fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun)
// _this.cachedRowHeight = []; //缓存每行的高度 _this.cachedRowHeight = []; //缓存每行的高度
// _this.cachedRowParentIndex = []; _this.cachedRowParentIndex = [];
_this.computeCachedRowParentIndex(nextProps.data); _this.computeCachedRowParentIndex(nextProps.data);
if(nextProps.data.length>0){ if(nextProps.data.length>0){
_this.endIndex = _this.currentIndex - nextProps.loadBuffer + _this.loadCount; //数据结束位置 _this.endIndex = _this.currentIndex - nextProps.loadBuffer + _this.loadCount; //数据结束位置