如何让TMS WEB Core中的TWebTableControl组件支持滚动？

问题描述 #

表单中的TWebTableControl组件初始加载数百行数据，后续动态加载近千行，通过网页审查元素确认所有数据已加载，但仅能看到少量行，组件无滚动条且鼠标滚轮操作无效。组件的DFM代码如下：

object tblUsers: TWebTableControl
  AlignWithMargins = True
  Left = 19
  Top = 67
  Width = 1374
  Height = 846
  Margins.Left = 5
  Margins.Top = 5
  Margins.Right = 5
  Margins.Bottom = 5
  Align = alClient
  BorderColor = clSilver
  ChildOrder = 1
  ElementHeaderClassName = 'table thead-dark'
  ElementTableClassName = 'table table-hover table-bordered table-striped table-sm'
  ColCount = 4
end

另外，官方文档提及该组件有ScrollVertical布尔属性，但在Delphi对象检视器中无法找到。

解决方案 #

1. 代码手动设置ScrollVertical属性 #

若设计时对象检视器不显示该属性，可在运行时通过代码开启垂直滚动：
在窗体创建事件或数据加载完成后添加以下代码：

tblUsers.ScrollVertical := True;

此方法直接调用组件属性，无需依赖设计界面。

2. 嵌套滚动容器 #

将TWebTableControl放入TWebScrollBox组件中，利用滚动容器提供滚动功能：

• 在窗体上添加一个TWebScrollBox，设置其Align = alClient，并调整Margins与原TableControl一致
• 将原TWebTableControl移动到TWebScrollBox内，设置其Align = alClient
• 确保TWebScrollBox的ScrollBars属性设置为ssVertical或ssAutoVertical

3. 通过CSS强制开启滚动 #

利用组件的ElementTableClassName添加自定义CSS类，强制表格容器具备滚动特性：

1. 修改DFM中的ElementTableClassName，添加自定义类名：

ElementTableClassName = 'table table-hover table-bordered table-striped table-sm scrollable-table'

2. 在项目的CSS文件中添加以下样式：

.scrollable-table {
  display: block;
  max-height: 800px; /* 根据实际容器高度调整 */
  overflow-y: auto;
}
.scrollable-table thead, .scrollable-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

该样式会固定表头，同时让表体内容垂直滚动。

4. 检查组件版本兼容性 #

若ScrollVertical属性确实存在但设计界面不显示，可能是组件版本较旧，尝试升级到最新版本的TWebTableControl组件，新版本可能修复了设计时属性显示的问题。

内容的提问来源于stack exchange，提问作者Shaun Roselt