企业官网建设流程全解析

vxe-column 列自定义完全指南：多级表头、冻结列与列宽拖动一次讲透

【免费下载链接】vxe-tablevxe table 支持 vue2, vue3 的表格解决方案项目地址: https://gitcode.com/x-extends/vxe-table

vxe-table 是支持 Vue 2 和 Vue 3 的高性能表格解决方案，而<vxe-column>是它的核心配置单元。本文带你快速上手 vxe-column 列自定义：从基础属性、多级表头、冻结列到列宽拖动，四大高频场景一次讲透，帮你把表格列配置玩明白。

一、认识 vxe-column：每列配置的起点

一个表格 = 若干列的组合。在 vxe-table 中，每一列都用一个<vxe-column>标签描述，最常用的属性只有三个：

最简用法：

<vxe-table :data="tableData" border> <vxe-column field="name" title="姓名" width="120"></vxe-column> <vxe-column field="age" title="年龄" width="80"></vxe-column> <vxe-column field="address" title="地址" min-width="200"></vxe-column> </vxe-table>

小提示：

• width是"锁死"宽度，min-width则是"保底"宽度，剩余空间会按最小宽度比例分配给各列——布局弹性更强，推荐优先使用。
• 常用内置列类型：type="seq"（序号列）、type="checkbox"（多选列）、type="radio"（单选列）、type="expand"（展开列）。

完整的列属性定义（共 40+ 项）可以参考源码 packages/table/src/column.ts，组件注册入口在 packages/column/index.ts。

二、多级表头：用 vxe-colgroup 分组

当列很多、业务维度又复杂时，一张"扁平表头"往往不够看。vxe-table 提供了<vxe-colgroup>分组节点，嵌套一层就是二级表头，想套几层就套几层。

<vxe-table :data="tableData" border> <vxe-column field="name" title="姓名" width="100"></vxe-column> <vxe-colgroup title="成绩" field="score"> <vxe-column field="math" title="数学"></vxe-column> <vxe-column field="english" title="英语"></vxe-column> </vxe-colgroup> <vxe-colgroup title="信息" field="info"> <vxe-column field="address" title="地址"></vxe-column> <vxe-column field="phone" title="电话"></vxe-column> </vxe-colgroup> </vxe-table>

效果就是经典的"表头分组"样式：成绩横跨数学/英语两列。实现原理不复杂——分组节点本质上也是一个"列配置"，会维护一个children子列数组，递归挂到父列上，源码见 packages/table/src/group.ts 和组件注册 packages/colgroup/index.ts。

💡 进阶技巧：

• 分组列上也可以配headerAlign、align等，作用于整组；
• 分组列里还能放type="expand"展开列、type="checkbox"多选列（参考示例 examples/views/table/TableTest3.vue）；
• 列上visible: false可临时隐藏某列而不删代码，便于快速调试。

三、冻结列：fixed 让关键列"钉"在原地

横向数据一多，用户滚到最右侧时，"序号、姓名、操作按钮"这些关键列往往已经滚出视野。此时用fixed把列钉住：

• fixed="left"：冻结在左侧
• fixed="right"：冻结在右侧

<vxe-table :data="tableData" border> <vxe-column type="checkbox" width="60" fixed="left"></vxe-column> <vxe-column field="name" title="姓名" width="120" fixed="left"></vxe-column> <!-- ... 中间几十列 ... --> <vxe-column field="action" title="操作" width="120" fixed="right"></vxe-column> </vxe-table>

两个实用建议：

1. 冻结列必须写死width。冻结区按固定宽度拼接，弹性宽度会导致错位；
2. 冻结列要连续。左侧冻结列之间不能插入普通列，否则布局会"断裂"。

项目里的官方示例 examples/views/grid/GridTest3.vue 就是"左侧多选+首列冻结、右侧操作列冻结"的标准写法，examples/views/table/TableTest9.vue 还演示了冻结列配合drag-sort拖拽排序的效果。

四、列宽拖动：resizable 一个属性搞定

让用户自己拖表头调整列宽，是提升表格体验最便宜的手段。vxe-table 支持"整表开启"和"单列开启"两种方式：

方式一：整表开启（推荐）

<vxe-table :data="tableData" border :column-config="{resizable: true}"></vxe-table>

在表头任意列的分隔条上按住拖动即可，用户调整后的列宽会自动记忆。

方式二：单列开启

<vxe-column field="name" title="姓名" width="120" resizable></vxe-column>

相关细节：

• 拖动列宽的同时，配合表头drag: true还能拖动列顺序，见 examples/views/table/TableTest9.vue；
• 行高拖动、双击自动撑满高度由resizable-config控制，参考 examples/views/table/TableTest3.vue；
• 列拖动、列自定义（隐藏/排序后自动保存）等能力由工具条配合column-config的useKey等配置完成，示例见 examples/views/table/TableTest3.vue。

五、常用属性速查表

六、总结

• 列 =<vxe-column>：field + title + width三件套起步，min-width布局更弹性；
• 多级表头 =<vxe-colgroup>：嵌套即分组，支持任意层级；
• 冻结列 =fixed：左钉关键信息、右钉操作按钮，注意固定写死宽度；
• 拖动列宽 =resizable：整表开column-config，单列开属性，体验提升立竿见影。

掌握这四招，vxe-column 的列自定义基本就通透了。更多属性细节可查阅源码 packages/table/src/column.ts 与示例目录 examples/views/table/。

【免费下载链接】vxe-tablevxe table 支持 vue2, vue3 的表格解决方案项目地址: https://gitcode.com/x-extends/vxe-table