fix:树表异步加载子节点,data数据未更新的问题

This commit is contained in:
yangchch6 2019-12-26 18:28:11 +08:00
parent 61ba3dbf6e
commit 77f565d7dd
4 changed files with 34 additions and 31 deletions

View File

@ -77,11 +77,11 @@ function bigData(Table) {
BigData.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
var props = this.props;
var currentIndex = nextProps.currentIndex,
data = nextProps.data,
newData = nextProps.data,
newExpandedKeys = nextProps.expandedRowKeys;
var _this = this,
dataLen = data.length;
dataLen = newData.length;
if (nextProps.scroll.y !== props.scroll.y) {
var rowHeight = nextProps.height ? nextProps.height : defaultHeight;
var scrollY = nextProps.scroll.y ? parseInt(nextProps.scroll.y) : 0;
@ -92,21 +92,21 @@ function bigData(Table) {
_this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置
}
if ('data' in nextProps) {
var isTreeType = nextProps.isTree ? true : _this.checkIsTreeType(nextProps.data);
var isTreeType = nextProps.isTree ? true : _this.checkIsTreeType(newData);
_this.treeType = isTreeType;
//fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun)
if (nextProps.data.toString() !== props.data.toString()) {
if (newData.toString() !== props.data.toString()) {
_this.cachedRowHeight = []; //缓存每行的高度
_this.cachedRowParentIndex = [];
_this.computeCachedRowParentIndex(nextProps.data);
_this.computeCachedRowParentIndex(newData);
}
_this.treeData = [];
_this.flatTreeData = [];
if (nextProps.data.length > 0) {
if (newData.length > 0) {
_this.endIndex = _this.currentIndex - nextProps.loadBuffer + _this.loadCount; //数据结束位置
}
if (isTreeType) {
_this.getTreeData(newExpandedKeys);
_this.getTreeData(newExpandedKeys, newData);
}
}
//如果传currentIndex会判断该条数据是否在可视区域如果没有的话则重新计算startIndex和endIndex
@ -132,7 +132,8 @@ function bigData(Table) {
/**
* 如果是树形表需要对传入的 data 进行处理
* @param expandedKeys: props 中传入的新 expandedRowKeys 属性值
* @param expandedKeys: nextProps 中传入的新 expandedRowKeys 属性值
* @param newData: nextProps 中传入的新 data 属性值
*/
@ -374,11 +375,11 @@ function bigData(Table) {
}, _initialiseProps = function _initialiseProps() {
var _this4 = this;
this.getTreeData = function (expandedKeys) {
this.getTreeData = function (expandedKeys, newData) {
var startIndex = _this4.startIndex,
endIndex = _this4.endIndex;
var data = _this4.props.data;
var data = newData ? newData : _this4.props.data;
_this4.cacheExpandedKeys = expandedKeys && new Set(expandedKeys);
// 深递归 data截取可视区 data 数组,再将扁平结构转换成嵌套结构
var sliceTreeList = [];

21
dist/demo.js vendored
View File

@ -300973,11 +300973,11 @@
BigData.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
var props = this.props;
var currentIndex = nextProps.currentIndex,
data = nextProps.data,
newData = nextProps.data,
newExpandedKeys = nextProps.expandedRowKeys;
var _this = this,
dataLen = data.length;
dataLen = newData.length;
if (nextProps.scroll.y !== props.scroll.y) {
var rowHeight = nextProps.height ? nextProps.height : defaultHeight;
var scrollY = nextProps.scroll.y ? parseInt(nextProps.scroll.y) : 0;
@ -300988,21 +300988,21 @@
_this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置
}
if ('data' in nextProps) {
var isTreeType = nextProps.isTree ? true : _this.checkIsTreeType(nextProps.data);
var isTreeType = nextProps.isTree ? true : _this.checkIsTreeType(newData);
_this.treeType = isTreeType;
//fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun)
if (nextProps.data.toString() !== props.data.toString()) {
if (newData.toString() !== props.data.toString()) {
_this.cachedRowHeight = []; //缓存每行的高度
_this.cachedRowParentIndex = [];
_this.computeCachedRowParentIndex(nextProps.data);
_this.computeCachedRowParentIndex(newData);
}
_this.treeData = [];
_this.flatTreeData = [];
if (nextProps.data.length > 0) {
if (newData.length > 0) {
_this.endIndex = _this.currentIndex - nextProps.loadBuffer + _this.loadCount; //数据结束位置
}
if (isTreeType) {
_this.getTreeData(newExpandedKeys);
_this.getTreeData(newExpandedKeys, newData);
}
}
//如果传currentIndex会判断该条数据是否在可视区域如果没有的话则重新计算startIndex和endIndex
@ -301028,7 +301028,8 @@
/**
* 如果是树形表需要对传入的 data 进行处理
* @param expandedKeys: props 中传入的新 expandedRowKeys 属性值
* @param expandedKeys: nextProps 中传入的新 expandedRowKeys 属性值
* @param newData: nextProps 中传入的新 data 属性值
*/
@ -301270,11 +301271,11 @@
}, _initialiseProps = function _initialiseProps() {
var _this4 = this;
this.getTreeData = function (expandedKeys) {
this.getTreeData = function (expandedKeys, newData) {
var startIndex = _this4.startIndex,
endIndex = _this4.endIndex;
var data = _this4.props.data;
var data = newData ? newData : _this4.props.data;
_this4.cacheExpandedKeys = expandedKeys && new Set(expandedKeys);
// 深递归 data截取可视区 data 数组,再将扁平结构转换成嵌套结构
var sliceTreeList = [];

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -50,8 +50,8 @@ export default function bigData(Table) {
}
componentWillReceiveProps(nextProps) {
const props = this.props;
const {currentIndex ,data, expandedRowKeys:newExpandedKeys} = nextProps;
const _this = this,dataLen = data.length;
const {currentIndex ,data:newData, expandedRowKeys:newExpandedKeys} = nextProps;
const _this = this,dataLen = newData.length;
if (nextProps.scroll.y !== props.scroll.y) {
const rowHeight = nextProps.height ? nextProps.height : defaultHeight;
const scrollY = nextProps.scroll.y ? parseInt(nextProps.scroll.y) : 0;
@ -65,21 +65,21 @@ export default function bigData(Table) {
}
if('data' in nextProps){
const isTreeType = nextProps.isTree ? true : _this.checkIsTreeType(nextProps.data);
const isTreeType = nextProps.isTree ? true : _this.checkIsTreeType(newData);
_this.treeType = isTreeType;
//fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun)
if (nextProps.data.toString() !== props.data.toString()) {
if (newData.toString() !== props.data.toString()) {
_this.cachedRowHeight = []; //缓存每行的高度
_this.cachedRowParentIndex = [];
_this.computeCachedRowParentIndex(nextProps.data);
_this.computeCachedRowParentIndex(newData);
}
_this.treeData = [];
_this.flatTreeData = [];
if(nextProps.data.length>0){
if(newData.length>0){
_this.endIndex = _this.currentIndex - nextProps.loadBuffer + _this.loadCount; //数据结束位置
}
if(isTreeType){
_this.getTreeData(newExpandedKeys);
_this.getTreeData(newExpandedKeys, newData);
}
}
//如果传currentIndex会判断该条数据是否在可视区域如果没有的话则重新计算startIndex和endIndex
@ -102,11 +102,12 @@ export default function bigData(Table) {
/**
* 如果是树形表需要对传入的 data 进行处理
* @param expandedKeys: props 中传入的新 expandedRowKeys 属性值
* @param expandedKeys: nextProps 中传入的新 expandedRowKeys 属性值
* @param newData: nextProps 中传入的新 data 属性值
*/
getTreeData = (expandedKeys) => {
getTreeData = (expandedKeys, newData) => {
let { startIndex, endIndex } = this;
const { data } = this.props;
const data = newData ? newData : this.props.data;
this.cacheExpandedKeys = expandedKeys && new Set(expandedKeys);
// 深递归 data截取可视区 data 数组,再将扁平结构转换成嵌套结构
let sliceTreeList = [];