VTable表格组件如何在透视表中渐进加载子节点？

问题标题

VTable表格组件如何在透视表中渐进加载子节点？

问题描述

使用VTable表格组件，如何在透视表中渐进加载子节点，点击父节点的展开按钮后，再动态加载子节点的信息

解决方案

VTable提供setTreeNodeChildrenAPI，用来更新透视结构某个节点的子节点状态，可以用来实现渐进加载功能

1. 维度树配置

正常情况下，维度树（columnTree/rowTree）中，children属性为一个数组，为该节点的子节点信息

{
    dimensionKey: 'name',
    value: 'a',
    children: [
        {
            dimensionKey: 'name-1',
            value: 'a-1',
            children: [
                // ......
            ]
        },
        // ......
    ]
}

如何需要动态加载子节点信息，可以配置children属性为true，此时该节点在表格中会作为父节点显示，但是点击单元格内的展开按钮，会触发相关事件，但是表格不会有任何主动变化。

2. 监听事件

展开按钮点击后，会触发VTable.ListTable.EVENT_TYPE.TREE_HIERARCHY_STATE_CHANGE事件，需要监听这个事件，使用setTreeNodeChildrenAPI更新子节点信息和对应增加的数据

const { TREE_HIERARCHY_STATE_CHANGE } = VTable.ListTable.EVENT_TYPE;
instance.on(TREE_HIERARCHY_STATE_CHANGE, args => {
  if (args.hierarchyState === VTable.TYPES.HierarchyState.expand && !Array.isArray(args.originData.children)) {
    setTimeout(() => {
      const newData = [
        // ......
      ];
      const children = [
        {
          dimensionKey: 'name-1',
          value: 'a-1',
        },
        {
          dimensionKey: 'name-1',
          value: 'a-2'
        }
      ];
      instance.setTreeNodeChildren(children, newData, args.col, args.row);
    }, 200);
  }
});

代码示例

demo：visactor.io/vtable/demo…

相关文档

相关api：visactor.io/vtable/opti…')

教程：visactor.io/vtable/guid…

github：github.com/VisActor/VT…