行高列宽调整

在实际应用中，表格中的数据长度往往各不相同，数据较长的列可能会影响其他列的布局。为了更好地展示数据，我们需要根据数据内容调整行高列宽。VTable 提供了行高列宽调整功能，以便用户根据需求轻松调整表格行高列宽。

调整行高列宽开关

我们可以通过设置 columnResizeMode 来开启或关闭列宽调整功能；rowResizeMode 来开启或关闭行高调整功能。该配置项有以下几种可选值:

'all': 整列包括表头和 body 处的单元格均可调整列宽/行高
'none': 禁止调整列宽/行高
'header': 只能在表头处单元调整列宽/行高
'body': 只能在 body 单元格调整列宽/行高

调整列宽限制

在实际项目中，我们可能需要对列宽进行一定的限制，虽然可以拖拽列宽但不能无限拉小或者拉大。这时，我们可以通过设置 columns.minWidth 和 columns.maxWidth 来限制每一列的最小和最大列宽。

columns: [
  {
    ...
    minWidth: '50px',
    maxWidth: '200px  },
  {
    ...
    minWidth: '100px',
    maxWidth: '300px'
  }
];

设置后，列宽在拖拽调整时将不超过设定范围。

列宽行高调整作用范围

配置项(透视表及透视图支持)：

  /**
   * 调整列宽的生效范围：'column' | 'indicator' | 'all' | 'indicatorGroup'，单列|按指标|所有列|属于同一维度值的多个指标
   */
 columnResizeType?: 'column' | 'indicator' | 'all' | 'indicatorGroup';
   /**
   * 调整行高的生效范围：'row' | 'indicator' | 'all' | 'indicatorGroup'，单行|按指标|所有行|属于同一维度值的多个指标
   */
 rowResizeType?: 'row' | 'indicator' | 'all' | 'indicatorGroup';

column/row：默认值，仅调整当前列/行的宽度；
indicator：相同指标列的列宽/行高一并调整；
all：所有列的列宽/行高一并调整；
indicatorGroup：同一组的指标列一并调整，如东北维度值下有两个指标为：销售额和利润，当调整销售额的列宽时，利润列也会进行调整；

列宽调整作用范围配置示例

在下面的示例中将 columnResizeType 设置为 all。

行高调整作用范围同理。

双击自动列宽

当用户在浏览数据时，发现数据被折叠想要查看完整数据，可以通过双击交互来按内容展开列宽。

但是内容如果过长，你会发现内容还是被缺省了，这个是因为我们内部有个最大列宽的默认配置limitMaxAutoWidth: 450限制计算出的最大列宽为 450，这个时候你可以调整这个值来满足需求。或者可以配置自动行高来折行展示（非必要不要开启，有一定性能开销）：

  heightMode:'autoHeight',
  autoWrapText:true,

调整列宽交互效果配置

在进行列宽行高调整时，我们可以自定义调整列宽标记线的样式。在 theme.columnResize 对象中，我们可以设置以下配置项：

lineColor: 直线的颜色
bgColor: 背景线的颜色
lineWidth: 直线的线宽
width: 背景线的宽度
resizeHotSpotSize: 响应调整行高列宽交互行为热区的大小

{
    theme:
    {
        columnResize : {
            lineColor: 'blue',
            bgColor: 'red',
            lineWidth: 1,
            width: 5,
            resizeHotSpotSize: 8,
        }
    }
}

这样我们就可以看到类似如下的交互效果：

样式示例

根据上述配置，我们可以实现一个简单的 VTable 示例，展示如何调整列宽：