数据源为树形数据时无法开启虚拟滚动

[Tanimodori]

可复现的链接：

在线链接：https://stackblitz.com/github/Tanimodori/vxe-tree-data-virtual-loading-issue?file=README.md 复现repo：https://github.com/Tanimodori/vxe-tree-data-virtual-loading-issue

运行命令：pnpm dev

问题描述与截图：

采用 https://vxetable.cn/#/table/scroll/tree 的示例，将数据源转换为树形以模拟树形数据源的情况，虚拟滚动无法开启。

数组数据源，虚拟滚动正常，滚动时DOM正常更新。

ArraySourceTable.vue（省略了无关的Header，下同）

<template>
    <vxe-table
      ref="xTreeRef"
      show-overflow
      height="400"
      :tree-config="{ transform: true }"
      :scroll-y="{ gt: 20 }"
      :data="data"
    >
      <vxe-column type="seq" width="200" tree-node></vxe-column>
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="size" title="Size"></vxe-column>
      <vxe-column field="type" title="Type"></vxe-column>
      <vxe-column field="date" title="Date"></vxe-column>
    </vxe-table>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { getData } from './data'
  const data = ref(getData())
</script>

树形数据源，无虚拟滚动，滚动时DOM没有变化，以下截图为展开节点的变化。

TreeSourceTable.vue

<template>
    <vxe-table
      ref="xTreeRef"
      show-overflow
      height="400"
      :tree-config="{}"
      :scroll-y="{ gt: 20 }"
      :data="data"
    >
      <vxe-column type="seq" width="200" tree-node></vxe-column>
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="size" title="Size"></vxe-column>
      <vxe-column field="type" title="Type"></vxe-column>
      <vxe-column field="date" title="Date"></vxe-column>
    </vxe-table>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { getData, treeTransform } from './data'
  const data = ref(treeTransform(getData()))
</script>

尝试将scroll-y设置成{enabled: true, gt: 0}也无法开启。

转换代码：

// simulate a tree data source
export function treeTransform(data: RowVO[]) {
  // construct id map and result map
  const map = new Map<number, RowVO>()
  const resultMap = new Map<number, RowVOExtended>()
  for (const item of data) {
    map.set(item.id, item)
    resultMap.set(item.id, {
      ...item,
      children: []
    })
  }

  // add children to result map
  for (const item of data) {
    const parentId = item.parentId
    if (!parentId) {
      continue
    }
    const parent = map.get(parentId)
    if (!parent) {
      continue
    }
    const parentResult = resultMap.get(parentId)
    if (!parentResult) {
      continue
    }
    const itemResult = resultMap.get(item.id)
    if (!itemResult) {
      continue
    }
    parentResult.children.push(itemResult)
  }

  // get root nodes
  const result: RowVOExtended[] = []
  for (const item of data) {
    if (item.parentId) {
      continue
    }
    const itemResult = resultMap.get(item.id)
    if (!itemResult) {
      continue
    }
    result.push(itemResult)
  }

  // log result
  console.log('treeTransform', data, result)
  return result
}

期望的结果：

虚拟滚动应正常开启

操作系统：

Windows 11

浏览器版本：

Chrome 113.0.5672.127

vue 版本：

3.3.2

vxe-table 版本：

4.4.0

[litt1e-p]

same bug