How the VTable component progressively loads sub-nodes in a list?

Question title

How to progressively load sub-nodes in a list with the VTable component?

Problem description

Using the VTable table component, how to gradually load sub-nodes in the list, click the expand button of the parent node, and then dynamically load the information of the sub-node

Solution

VTable provides setRecordChildrenAPI to update the sub-node status of a node, which can be used to implement progressive loading function

1. Data preparation

Normally, in the data of the tree structure list, the childrenattribute is an array, which is the sub-node information of the node

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

How to dynamically load sub-node information, you can configure the childrenproperty to true. At this time, the node will be displayed as the parent node in the table, but clicking the expand button in the cell will trigger relevant events, but the table will not have any active changes.

1. Monitoring events

After the expand button is clicked, the VTable. ListTable.EVENT_TYPEevent will be triggered. You need to listen to this event and use the setRecordChildrenAPI to update the sub-node information

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 children = [
        {
          name: 'a-1',
          value: 5,
        },
        {
          name: 'a-2',
          value: 5
        }
      ];
      instance.setRecordChildren(children, args.col, args.row);
    }, 200);
  }
});

Code example

demo：https://visactor.io/vtable/demo/table-type/list-table-tree-lazy-load

Related Documents

Related api: https://visactor.io/vtable/option/ListTable-columns-text#tree

Tutorial: https://visactor.io/vtable/guide/table_type/List_table/tree_list

github：https://github.com/VisActor/VTable