sunui UI

切换主题

VirtualizedTable 虚拟化表格 ​

展示超大结构化数据集。清晰呈现业务事实、状态和变化。

实时示例

LIVE · VirtualizedTableElement Plus / sunui
WO-1100
自动生成的工单记录 1
处理中
WO-1099
自动生成的工单记录 2
待处理
WO-1098
自动生成的工单记录 3
待处理
WO-1097
自动生成的工单记录 4
处理中
WO-1096
自动生成的工单记录 5
待处理
WO-1095
自动生成的工单记录 6
待处理
WO-1094
自动生成的工单记录 7
处理中
工单
主题
状态
Vue 示例
<el-virtualized-table />

使用规则

应该

先保证扫描与比较效率，再增加视觉强调；必须定义加载、空和错误状态。

避免

不要通过局部硬编码改变品牌色、圆角或状态语义；不要隐藏必要的操作反馈。

状态与变体

  • 默认、悬停、聚焦、按下和禁用状态必须保持可辨识。
  • 加载、空、错误状态按业务影响选用，不用品牌强调色表达错误。
  • 紧凑尺寸只用于高密度后台场景，触控目标仍应满足可操作要求。

基础用法

<el-table-v2>虚拟化表格</el-table-v2>

设计变量

color.background.surfacecolor.text.secondaryspacing.mdshadow.sm

无障碍

状态同时使用文字；图片提供替代文本；复杂数据结构支持键盘浏览。

查看 Element Plus VirtualizedTable API ↗