行列冻结

在数据分析应用中，表格的数据量通常非常庞大，这就导致表格在横向上有很多列，用户在水平滚动表格时，可能导致关键信息的列被“滚出”可视范围。为了在横向滚动过程中，始终保持这些关键信息列可见，我们需要将这些列或列进行“冻结”。通过行列冻结功能，可以让数据分析更加轻松、清晰。

注：该功能仅支持在基本表格 ListTable 使用。

左侧冻结列设置

针对左侧列冻结是最常见的冻结需求，相比其他方向的冻结这也是 VTable 支持功能最全面的冻结能力。相关配置项如下：

frozenColCount: 冻结列数，默认为 0。
allowFrozenColCount: 允许可操作冻结列数，即前多少列会出现冻结操作按钮，默认为 0。
showFrozenIcon: 是否显示固定列图标，默认为 true。
maxFrozenWidth: 最大冻结宽度，默认为'80%'。
scrollFrozenCols: 当冻结列总宽度超过 maxFrozenWidth 时，左侧冻结区域可横向滚动，默认为 false。开启后会保留全部冻结列，并在冻结区域内通过触摸板横向滚动或拖拽滚动条查看超出部分。
unfreezeAllOnExceedsMaxWidth: 当列宽超过最大冻结宽度时，是否全部自动解冻，默认为 true。如果设置为false，则不会解冻全部列，而是根据 maxFrozenWidth 的值来决定最终解冻的列数。

以下是一个配置示例：

const listTable = new ListTable({
  // ...其他配置项
  frozenColCount: 2,
  allowFrozenColCount: 4,
  showFrozenIcon: true
});

在此示例中，我们将冻结列数设置为 2，表示前两列将被冻结。同时，允许冻结列数设置为 4，表示前四列会出现冻结操作按钮，用户可以根据需要进行手动冻结。最后，设置 showFrozenIcon 为 true，使基本表格显示固定列图标。

右侧冻结列

右侧冻结列在表格中的一个常见场景是用于放置操作按钮或操作菜单，以便用户可以方便地对表格中的每一行进行操作。

配置项如下：

rightFrozenColCount: 右侧冻结列数，默认为 0。
maxRightFrozenWidth: 右侧最大冻结宽度，固定值 or 百分比。默认与 maxFrozenWidth 一致。
scrollRightFrozenCols: 当右侧冻结列总宽度超过 maxRightFrozenWidth 时，右侧冻结区域可横向滚动，默认为 false。

冻结区域横向滚动

当冻结区域的“内容总宽度”超过最大冻结宽度时，可以开启冻结区域内部横向滚动来保留全部冻结列。

const listTable = new ListTable({
  // ...其他配置项
  frozenColCount: 6,
  maxFrozenWidth: 320,
  scrollFrozenCols: true,

  rightFrozenColCount: 4,
  maxRightFrozenWidth: 320,
  scrollRightFrozenCols: true
});

开启后：

左/右冻结区域会在自身区域内响应触摸板横向滚动。
当滚动条可见时，底部会出现对应冻结区域的独立横向滚动条。

顶部冻结行

表头部分是自动会冻结的，如果想 body 部分也可以冻结，只需要设置 frozenRowCount 即可。主要设置的 number 值要大于表头行数才会冻结 body 部分的行。

底部冻结行

底部冻结行的场景可以用于固定总计行或具有多级表头的表格。用户可以在滚动表格时保持总计行的可见性，方便查看汇总数据。

配置项如下：

bottomFrozenRowCount: 底部冻结行，默认为 0。

冻结列接口使用

除了通过配置项进行冻结列设置外，VTable 还提供了相应的接口方法setFrozenColCount来动态设置冻结列数，以便在程序运行过程中根据需要随时调整。

您可以使用 ListTable 类的 setFrozenColCount 接口方法来设置当前冻结列数，示例如下：

listTable.setFrozenColCount(3);
or;
listTable.frozenColCount = 3;

在此示例中，我们将当前列表的冻结列数调整为 3。此时，前三列将被冻结。

示例

示例：