Table 表格 - 列宽调整

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

拖拽模式

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

日期	姓名	省份	城市	地址

2024-01-01	张三	北京	朝阳区	建国路88号
2024-01-02	李四	上海	浦东新区	陆家嘴金融中心
2024-01-03	王五	广东	天河区	珠江新城
2024-01-04	赵六	浙江	西湖区	文三路
2024-01-05	钱七	江苏	鼓楼区	中山北路

基本列宽调整

分组列头

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

基本信息		地址信息
姓名	年龄	省份	城市	详细地址	邮编

张三	28	北京	朝阳区	建国路88号	100020
李四	32	上海	浦东新区	陆家嘴环路	200120
王五	25	广东	天河区	珠江新城	510623
赵六	30	浙江	西湖区	文三路	310012

分组列头 + 列宽调整

冻结列

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

ID	姓名	部门	职位	薪资	城市	手机号

1	张三	技术部	前端工程师	15000	北京	13800001111
2	李四	产品部	产品经理	18000	上海	13800002222
3	王五	设计部	UI 设计师	14000	广州	13800003333
4	赵六	运营部	运营总监	22000	深圳	13800004444

冻结列 + 列宽调整

限制拖拽最小列宽

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

提示: ID 最小 60px，姓名最小 80px，邮箱最小 150px，角色最小 80px，描述最小 120px

ID	姓名	邮箱	角色	描述

1	张三	zhangsan@example.com	管理员	系统超级管理员，拥有所有权限
2	李四	lisi@example.com	编辑	内容编辑，负责文章审核和发布
3	王五	wangwu@example.com	查看者	只读权限，仅可查看数据

限制最小列宽

列级别配置

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

提示: "ID" 和 "年龄" 列不可调整宽度（resizable: false）

ID	姓名	年龄	部门	职位

1	张三	28	技术部	前端工程师
2	李四	32	产品部	产品经理
3	王五	25	设计部	UI 设计师
4	赵六	30	运营部	运营总监

列级别 resizable 控制

事件监听

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

ID	姓名	年龄	部门

1	张三	28	技术部
2	李四	32	产品部
3	王五	25	设计部

列宽变化日志：

拖拽列边缘以查看日志

列宽变化事件

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 设置。