问题标题

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

问题描述

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

解决方案

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

• 数据准备
  正常情况下，树形结构列表的数据中，children属性为一个数组，为该节点的子节点信息
  

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

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

• 监听事件
  展开按钮点击后，会触发VTable.ListTable.EVENT_TYPE.TREE_HIERARCHY_STATE_CHANGE事件，需要监听这个事件，使用setRecordChildrenAPI更新子节点信息
  

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);
  }
});</br>

代码示例

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

相关文档

相关api：https://visactor.io/vtable/option/ListTable-columns-text#tree
教程：https://visactor.io/vtable/guide/table_type/List_table/tree_list
github：https://github.com/VisActor/VTable