Table 表格 - 列宽调整

通过 resizable 属性开启列宽拖拽调整功能。用户可以在列头边缘拖拽改变列宽。

拖拽模式

设置 resizable 属性为 true 即可开启列宽调整功能。用户可在列头右侧边缘拖拽调整列宽。

基本列宽调整

分组列头

列宽调整与分组表头 (children) 兼容，可以调整分组表头下的子列宽度。

分组列头 + 列宽调整

冻结列

列宽调整可以与固定列 (fixed) 配合使用。

冻结列 + 列宽调整

限制拖拽最小列宽

通过列配置的 minWidth 限制列的最小宽度，防止列被拖拽过窄。

限制最小列宽

列级别配置

通过列配置的 resizable 属性，可以单独控制某一列是否可调整宽度。

列级别 resizable 控制

事件监听

通过 column-resize 事件监听列宽变化，获取当前列和新的宽度值。

列宽变化事件

API

Table Props（列宽调整相关）

属性	说明	类型	默认值
resizable	全局开启列宽调整	boolean	false

TableColumn Props（列宽调整相关）

属性	说明	类型	默认值
width	列宽度（像素或百分比）	number | string	—
minWidth	最小列宽（拖拽时最小不低于 40px）	number | string	—
maxWidth	最大列宽	number | string	—
resizable	该列是否可调整宽度（优先级高于全局 resizable）	boolean	—

事件

事件名	说明	参数
column-resize	列宽变化时触发	(column: TableColumn, width: number)

注意事项

1. 建议设置 border：带边框的表格可以更清晰地看到列边界和拖拽区域。
2. 设置初始宽度：建议每一列都设置 width，以确保列宽调整的计算准确。
3. minWidth 优先：拖拽时如果列宽小于 minWidth，将被限制在最小宽度。
4. 列级别覆盖：列配置中的 resizable 会覆盖全局 resizable 设置。