Tdesign 树形表格懒加载

<template>  
      <t-enhanced-table
                ref="tableRef"
                row-key="id"
                :data="data"
                :columns="columns"
                :tree="{ indent: 25, defaultExpandAll: false }"
                :tree-expand-and-fold-icon="treeExpandIcon"
                :on-expanded-tree-nodes-change="onExpandedTreeNodesChange"
                @page-change="onChange"
              >
      </t-enhanced-table>
</template>
<script setup lang="tsx">
import {
  ChevronDownIcon,
  ChevronRightIcon,
} from 'tdesign-icons-vue-next';
const onExpandedTreeNodesChange = (expandedTreeNodes, context) => {
  console.log(expandedTreeNodes, context);
  // 全选不需要处理；仅处理懒加载
  // eslint-disable-next-line no-useless-return
  if (!context.rowState) return;
  onTreeExpandChange(context);
};
const onTreeExpandChange = (context) => {
  console.log(context.rowState.expanded ? '展开' : '收起', context);
  /**
   * 如果是懒加载，请确认自己完成了以下几个步骤
   * 1. 提前设置 children 值为 true；
   * 2. 在 onTreeExpandChange 事件中处理异步数据；
   * 3. 自定义展开图标渲染 lazyLoadingTreeIconRender
   */
  if (context.row.children === true) {
    lazyLoadingData.value = context.row;
    const timer = setTimeout(() => {
      appendMultipleDataTo(context.row);
      lazyLoadingData.value = null;
      clearTimeout(timer);
    }, 200);
  }
};
function appendMultipleDataTo(row) {
    const appendList = data;//data需要的数据
    tableRef.value.appendTo(row?.id, appendList);
}
// 懒加载图标渲染
const treeExpandIcon= (h, { type, row }) => {
  if (lazyLoadingData.value && lazyLoadingData.value.id === row?.id) {
    return <Loading size="18px" />;
  }
  return type === 'expand' ? <ChevronRightIcon /> : <ChevronDownIcon />;
};
</script>