element-plus icon indicating copy to clipboard operation
element-plus copied to clipboard

[Component] [table-v2] 虚拟表格,在Chrome 135.0.7049.96,超过270000行之后的行不会显示。

Open bluejad opened this issue 8 months ago • 2 comments

Bug Type: Component

Environment

  • Vue Version: 3.2.38
  • Element Plus Version: 2.2.27
  • Browser / OS: Chrome 135.0.7049.96 / Windows 10 专业版 19045.2670
  • Build Tool: Vite

Reproduction

Related Component

  • el-table-v2

Reproduction Link

Element Plus Playground

Steps to reproduce

<template>
  <el-table-v2
    :columns="columns"
    :data="data"
    :width="400"
    :height="400"
    row-key="id"
    :row-height="40"
  />
</template>

<script setup>
const generateColumns = (length = 10, prefix = 'column-', props = {}) => 
  Array.from({ length }).map((_, columnIndex) => ({
    ...props,
    key: `${prefix}${columnIndex}`,
    dataKey: `${prefix}${columnIndex}`,
    title: `Column ${columnIndex}`,
    width: 150,
  }));

const generateData = (columns, length = 270000, prefix = 'row-') => 
  Array.from({ length }).map((_, rowIndex) => {
    return columns.reduce((rowData, column, columnIndex) => {
      rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`;
      return rowData;
    }, {
      id: `${prefix}${rowIndex}`, // 确保唯一 id
      parentId: null,
    });
  });

const columns = generateColumns(3);
const data = generateData(columns);
</script>

<style scoped>
:deep(.el-table-v2__header-row){
  display: flex;
  align-items: center;
  justify-content: space-between;
}
:deep(.el-table-v2__row){
  display: flex;
  align-items: center;
  justify-content: space-between;
}
:deep(.el-table-v2__row-cell){
  justify-content: center
}
:deep(.el-table-v2__header-row){
  background: rgb(0, 56, 116) !important;
}
:deep(.el-table-v2__header-cell){
  background: rgb(0, 56, 116) !important;
  justify-content: center
}
</style>

What is Expected?

显示全部的270000行数据

What is actually happening?

结果只显示267772行,267773行及之后的不显示。

Additional comments

只在谷歌浏览器下无法全部显示,在edge浏览器(版本 135.0.3179.85 (正式版本) (64 位))下可以全部显示。

bluejad avatar Apr 22 '25 08:04 bluejad

谷歌浏览器我记得dom尺寸超出1<<24px的部分会直接裁剪,safari会更大点,要做只能自己模拟滚动条了

toesbieya avatar Apr 22 '25 16:04 toesbieya

Image

版本 135.0.7049.115(正式版本) (64 位)没问题

guliansheng avatar May 09 '25 10:05 guliansheng

版本 136.0.7103.93(正式版本) (arm64) 表现正常。

btea avatar May 10 '25 06:05 btea

#20825 高度超出浏览器渲染元素高度上限,问题确实存在。

此问题没有复现,因此我会关闭它。后续有其他问题,随时在下方继续评论。

btea avatar Jun 11 '25 13:06 btea

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

此 issue 已被自动锁定,因为关闭后没有任何近期活动。如果有相关 bug,请重新创建一个新 issue。

github-actions[bot] avatar Oct 31 '25 16:10 github-actions[bot]