vxe-table 表头高度被拉伸

### 调整 vxe-table 表头高度的方法 在 `vxe-table` 中，如果遇到表头高度被拉伸的问题，可以通过自定义样式来解决。具体来说，可以利用 `header-cell-style` 属性或者全局配置来进行调整。 #### 方法一：通过 `header-cell-style` 设置固定高度 可以直接在表格组件中使用 `header-cell-style` 属性，指定表头单元格的高度以及其他样式[^1]。需要注意的是，设置高度时必须带上单位（如 `px`），否则可能不会生效。 以下是具体的实现方式： ```vue <template> <vxe-table :data="tableData" :header-cell-style="{ 'height': '32px', 'text-align': 'center', 'background': '#f0f0f0' }"> <vxe-column field="name" title="Name"></vxe-column> <vxe-column field="age" title="Age"></vxe-column> </vxe-table> </template> <script> export default { data() { return { tableData: [ { name: 'John', age: 25 }, { name: 'Doe', age: 30 } ] }; } }; </script> ``` #### 方法二：通过 CSS 自定义类名覆盖默认样式 除了直接修改 `header-cell-style` 的属性外，还可以通过自定义 CSS 类名的方式覆盖默认的表头高度。这种方式更加灵活，适合需要统一风格的应用场景。 示例如下： ```css /* 定义一个新的样式 */ .custom-header .vxe-header--cell { height: 32px !important; line-height: 32px !important; /* 配合高度调整文字垂直居中 */ } ``` ```vue <template> <vxe-table class="custom-header" :data="tableData"> <vxe-column field="name" title="Name"></vxe-column> <vxe-column field="age" title="Age"></vxe-column> </vxe-table> </template> <script> export default { data() { return { tableData: [ { name: 'John', age: 25 }, { name: 'Doe', age: 30 } ] }; } }; </script> ``` #### 方法三：通过全局配置调整表头高度 如果希望在整个项目范围内统一对表头高度进行控制，则可以在初始化阶段通过 `VXETable.setup()` 进行全局配置。 代码如下所示： ```javascript import VXETable from 'vxe-table'; // 全局设置表头高度 VXETable.setup({ header: { height: 32, // 单位为像素，默认无需带 px 后缀 } }); ``` 以上方法均能有效解决 `vxe-table` 表头高度被拉伸的问题。实际应用中可以根据需求选择合适的方式来调整表头高度。 ---