[Bug] 树形结构列表超过50行的数据之后，展开节点再收起底部会相应缺失展开的条数变为空白

[Aeiousl]

Version

1.14.0

Link to Minimal Reproduction

Steps to Reproduce

这个数据大概有50多条，然后我展开上面的任意节点（这里展开第一个）再关闭，再划到底部就是下图这样缺失上一个展开条数数量的底部条数

Current Behavior

let tableInstance;
const data = [
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
},
{
类别: '测试',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
}
];
const option = {
container: document.getElementById(CONTAINER_ID),
columns: [
{
field: '类别',
tree: true,
title: '类别',
width: 'auto',
sort: true
},
{
field: '销售额',
title: '销售额',
width: 'auto',
sort: true
// tree: true,
},
{
field: '利润',
title: '利润',
width: 'auto',
sort: true
}
],
showPin: true, //显示VTable内置冻结列图标
widthMode: 'standard',
allowFrozenColCount: 2,
records: data,
rowSeriesNumber: {
title: '序号',
width: 'auto',
headerStyle: {
bgColor:'#5389ff',
borderColor:'#5389ff',
fontWeight:'normal',
color:'white'
},
style: {
color: 'black'
}
},
hierarchyIndent: 20,
hierarchyExpandLevel: 2,
hierarchyTextStartAlignment: true,
sortState: {
field: '销售额',
order: 'asc'
},
theme: VTable.themes.BRIGHT,
defaultRowHeight: 32
};

const instance = new VTable.ListTable(option);

const { TREE_HIERARCHY_STATE_CHANGE } = VTable.ListTable.EVENT_TYPE;
instance.on(TREE_HIERARCHY_STATE_CHANGE, args => {
// TODO 调用接口插入设置子节点的数据
if (args.hierarchyState === VTable.TYPES.HierarchyState.expand && !Array.isArray(args.originData.children)) {
const record = args.originData;
instance.setLoadingHierarchyState(args.col, args.row);
setTimeout(() => {
const children = [
{
类别: record['类别'] + ' - 分类1', // 对应原子类别
销售额: 2,
数量: 5,
利润: 4
},
{
类别: record['类别'] + ' - 分类2', // 对应原子类别
销售额: 3,
数量: 8,
利润: 5
},
{
类别: record['类别'] + ' - 分类3（懒加载）',
销售额: 4,
数量: 20,
利润: 90.704,
children: true
},
{
类别: record['类别'] + ' - 分类4', // 对应原子类别
销售额: 5,
数量: 6,
利润: 7
}
];
instance.setRecordChildren(children, args.col, args.row);
}, 2000);
}
});
window['tableInstance'] = tableInstance;

Expected Behavior

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[ifyoung]

在官方列表里构建较长的树形列表也会出现这种问题https://visactor.io/vtable/demo/table-type/list-table-tree；

[Rui-Sun]

试一下1.14.3版本吧，有修复相关问题

[Aeiousl]

@Rui-Sun 测试了一下可以了d==(￣▽￣)b