数据表格 Data Table 最大只能显示699051行

[jxcproject]

描述错误

当数据表格配置 virtual-scroll 和 virtual-scroll-x 打开横向虚拟滚动 纵向虚拟滚动 后
只要数据超过699051就不会显示后面的行。比如我设置了1000000 行，滚动条已拉到最后。

复现步骤

1 配置 virtual-scroll 打开纵向虚拟滚动
2 配置 virtual-scroll-x 打开横向虚拟滚动
3 设置1000000 行

testnv.zip

<template>
  <n-config-provider >
    <n-data-table
        :columns="columns"
        :data="data"
        :max-height="250"
        virtual-scroll
        virtual-scroll-x
        :scroll-x="scrollX"
        :min-row-height="48"
        :height-for-row="heightForRow"
        virtual-scroll-header
        :header-height="48"
    />
  </n-config-provider>
</template>

<script>

import { defineComponent } from "vue";

import { NConfigProvider,NDataTable } from 'naive-ui'

const columns = [];

let scrollX = 0;

for (let i = 0; i < 5; ++i) {
  scrollX += 100;
  columns.push({
    title: `Col ${i}`,
    width: 100,
    key: i,
    fixed: i <= 1 ? "left" : i > 997 ? "right" : void 0,
    render(_, rowIndex) {
      return `${i}-${rowIndex}`;
    }
  });
}

export default defineComponent({
  components:{
    NDataTable,
    NConfigProvider
  },
  setup() {
    const data = Array.from({ length: 1000000 }).map((_, index) => ({
      key: index,
      name: `Edward King ${index}`,
      age: 32,
      address: `London, Park Lane no. ${index}`
    }));
    return {
      data,
      columns,
      scrollX,
      minRowHeight: 48,
      heightForRow: () => 48
    };
  }
});
</script>

最小复现链接

https://play.pro-components.cn/#eNp9VG1P2zAQ/iunCIkimpbxokFomRhjGhtiiPFh0jKtXuO2BseOHKcNqvrfd+c4abrR5Ut8z9n38jw+L4PLLOvNCx5EwcDyNJPM8otYAQxUONZqIqZhZvRcJNyAw50nYZaFlv2WvILoi8ZaFqnKh3HgV3HQ8tIRdNFvA09ZGc64mM4seg9PDtrOuTC2YDLMx0ZLuQ0Py1a4GsJg1fL7ZjahQqMX64zHpxv+Cg8n2tA29FfAR20e9GJ7aRiPIUMbgQh4LU+/orf/D7+ID/otDdDE6CKzbi3STBsLS0j4RCh+pdFWXFlYwcToFOIAVYyD8429d1cuxb3P0L37gPQ/km71sV3FxJyHhdilg1hRbsHLB0P48dPFk9yCZxPBA4chRdAhh3AQ/gZwcg77+2IPltRhfWB/CG8O6AzUgXtZkc86bhOAFVbyCEZXWsLOUqxG3QpfiMTOIjrqgWf+EoHwxkSUPEETBhgd3mH3kk9sHABhF3B29taBhth36FyLBOpQhitko/OrCyjyDa5LX3PltIVRMKJiwp1lvWM1ci0ArOi32kMLV7HipeMaVWGFdP+2OlWX49rMI59mLYQv6S+lXA7nyrGcrNPUVylEU4S0XxrDXnqkY2cJkqupZ4w+LLGXsqxDXYqqxeEF1KzXdJLDVwCgWEpKXCcLZhL4ItSUFKmabzaxKe45OlzbSWJ4nuO5W60Srbpwz8wz3DLFQeneOoJnb4+Ya/HcFEQ9NVH9TWlsf5kaG+cYB/KTm64Ijk8bR3teI0DesGmcvSq3y4yqOfUGfT9dQTeweTWLvadcK3wKXVH0jqWZkNx8zaxA3uMgqsuNAyalXnx2mDVFLSOemfHx8yv4U14SFgf3SBc3c5zVxmeZmXK8p+S+/nbHS1w3zlQnBb6z/3M+8Bz5ohqrbe8LlWDZrX2u2hv3LKCsj/l1abnK66ao0PWNcy8J3eBtra/LPeod15QGqz+4Tvt4

系统信息

System:
    OS: Windows 11 10.0.22621
    CPU: (20) x64 Intel(R) Xeon(R) CPU E5-2666 v3 @ 2.90GHz
    Memory: 17.95 GB / 31.84 GB
  Binaries:
    Node: 18.18.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (121.0.2277.128)
    Internet Explorer: 11.0.22621.3527

使用的包管理器

npm

验证

• 阅读 贡献指南。
• 阅读 文档。
• 检查是否已经存在相同问题的问题，以避免创建重复的问题。
• 确保这是一个具体的 bug。有关问题和答案，请打开 GitHub 讨论。
• 提供的复现是最小可复现的示例。

[Rolaka]

显示不了的原因是因为你的Chromium 最大支持的height 就到33554400px，100万行每行48px，远远超过允许高度。

以现在naive ui 的虚拟列表的原理，请不要渲染这种量级的数据，虚拟列表不是这么用的。

[f754699]

我第一次知道，height有最大高度啊，

[fanchaot]

显示不了的原因是因为你的Chromium 最大支持的height 就到33554400px，100万行每行48px，远远超过允许高度。

以现在naive ui 的虚拟列表的原理，请不要渲染这种量级的数据，虚拟列表不是这么用的。

如果每行的高度不一致，我应该怎么处理。 我必须使用ellipsis吗？因为我的内容高度是不确定的

[jahnli]

我第一次知道，height有最大高度啊，

是有的，超过浏览器元素的 max-height 就不行了