在SpreadJS中，双击两列之间的分割线会自适应调整列宽，但是只会根据列的内容的宽度来调整，

业务应用场景希望自适应调整列宽的时候能够同时考虑列头的宽度。

SpreadJS提供 autoFitType 属性，用来设置自适应的范围

autoFitType 属性有一下两种枚举值：

cell 自适应时仅包含单元格

cellWithHeader 自适应时同时包含表头的内容长度

请参考下面的Demo来实现：

效果如下：

SpreadJS中设置单元格自动换行后，单行自动调整行高没问题。如果行合并后，再自动调整行高就无效了。

那么在多行合并的情况下，如何实现自动调整行高？

多行合并情况下，自适应行高时不知道要修改哪一行的行高，所以此问题属于产品设计，这也是与Excel保持一致的。

可以通过新建一个sheet，获取此合并单元格的value和列宽，间接获取合并单元格的自适应高度。

然后根据需要调整某一行行高或者均匀分配各行调整等等。

代码如下：

在实际使用中，如果用户拥有非常多的数据，以一万行的数据举例，正常加载这些数据在表格中是毫无压力的。但是如果给这一万行的单元格都设置上了autofit自适应，需要花费非常多的时间去加载，性能相对较差。

为一万行单元格执行下面的代码。

执行上面的代码后，页面效果如下：

这个demo设置了10000行数据，并且每一行都进行了autofitRow，带来的结果如下：

可以看到数据以及前面的一些准备时间耗时都在一个非常小的范围。但是遍历调用autofitRow足足花费了接近18s的时间。

从上面的代码可以看到，其中已经用了挂起绘制和恢复，但是性能没有达到理想的一个状态。原因是与绘制不同，autoFitRow要考虑所有可见和不可见的单元格，然后是getText（getValue+format），考虑span，考虑高优先级选项，还有很多复杂的逻辑，因此就此demo来看，性能没有太多的提升空间。在这种情况下，他们一次自适应10000行，确实要花费这样的时间，而且根据数据集的大小，大小越大，花费的时间也越多。

所以，针对此问题变通的办法是，只对视图区域进行自适应，并在视图行改变时保持自适应，在这种情况下，所有的视图行都会显示正确的结果。简单理解就是我们只在用户看得见的地方做了自适应，看不见的区域还是与原来的一致。通过这个方案，即使数据集的大小变为1000000，也不会有性能问题。

我们需要获取视图顶部区域的行索引以及底部区域行索引，进行遍历设置自适应。

用户在制作填报模板时，考虑到不想让终端用户破坏模板样式，不想让其通过拖拽的方式修改行的高度和列的宽度。所以需要固定行高列宽。

该问题有多种解决方案，不同的方案有各自适用的场景，可根据实际情况选取合适的方案。

全局设置：

监听行高（RowHeightChanging）和列宽（ColumnWidthChanging）变化事件

该方法不会影响其它业务，但是缺点也很明显，就是在拖动的过程中，还是会看到拖动的虚线，影响使用体验。

结合表单保护实现

表单保护是用来实现控制单元格能否编辑的功能，通常情况下，当单元格锁定（lock）状态为true，且当前sheet处于保护状态（sheet.isProtected(true)）时，可以实现单元格无法编辑。在表单保护时，有相关的参数可以控制行列不能编辑

如果我们在表单保护时，根据不同状态去切换是否允许用户修改行高列宽。如果不是表单保护的状态，那该方法就不再适用了。

使用Resizable相关接口

设置第一行不可调整行高：

设置第一列不可调整列宽：

设置前10列不允许调整列宽：

在一些制作报告的场景中，需要将行头列头进行隐藏。但是有一些内容存在放不下问题，需要调整行高列宽。

此时无法通过拖拽方式调整行高列宽。

只能通过代码setColumnWidth 和setRowHeight来调整宽度高度

作者: Grapecity.China | 审核：Clark.Pan | 更新时间：2023.12.03