Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
5 tasks done
jxcproject opened this issue Feb 23, 2025 · 0 comments
Open
5 tasks done

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

jxcproject opened this issue Feb 23, 2025 · 0 comments
Labels
untriaged need to sort

Comments

@jxcproject
Copy link

描述错误

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

Image

复现步骤

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

验证

@jxcproject jxcproject added the untriaged need to sort label Feb 23, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
untriaged need to sort
Projects
None yet
Development

No branches or pull requests

1 participant