Element Plus 表格开启虚拟滚动后数据不显示怎么办？

风云 ☘︎ 提问于 2026-03-30 10:15:14 阅读 4

组件

我用 Element Plus 的 Table 组件加了虚拟滚动，但表格直接空白了，数据明明有啊。试过设置 height 和 max-height，也按文档加了 virtual-scroll 属性，还是不行。

我的代码大概是这样的：

<el-table
  :data="tableData"
  height="400"
  :virtual-scroll="true"
  style="width: 100%"
>
  <el-table-column prop="name" label="姓名" />
  <el-table-column prop="age" label="年龄" />
</el-table>

控制台也没报错，就是一片空白，到底漏了啥配置？

UI组件 Vue组件主题定制

我来解答赞 0 收藏

反馈

1 条解答

UE丶艳君 Lv1

这问题我也踩过坑，Element Plus 的虚拟滚动确实有点小脾气。你试试直接用这个：

<el-table

  :data="tableData"

  :height="400"

  :row-height="50"   

  :virtual-scroll="true"

  style="width: 100%"

>

  <el-table-column prop="name" label="姓名" />

  <el-table-column prop="age" label="年龄" />

</el-table>

重点是加上 :row-height 属性，它定义了每一行的高度。不写这个的话，表格可能就懵了，不知道该怎么渲染。

另外检查下你的数据格式有没有问题，我之前就被坑过，数据里混了个 null 值，整个表都不显示了。

要是还不行，打印下 tableData 看看数据结构对不对，别问为啥不报错，前端有时候就这样，啥事都憋心里不说出来。

2026-03-30 10:19