React版本表格表头单元格垂直文本实现问题求助

开发者阿泽

2026-7-9

解决React表格表头垂直文本显示问题

针对你遇到的垂直表头文本截断、内边距异常问题，核心原因是旋转元素时容器尺寸没有匹配旋转后的文本占用空间，以下是针对React场景（结合AG Grid）的可行实现方案：

1. 自定义垂直表头组件

用React组件封装表头内容，更精准控制布局：

import React from 'react';

const VerticalHeader = ({ displayName }) => {
  return (
    <div className="vertical-header-wrap">
      <span className="vertical-header-text">{displayName}</span>
    </div>
  );
};

export default VerticalHeader;

2. 配套CSS样式

重点处理旋转后的尺寸适配，避免截断和冗余内边距：

.vertical-header-wrap {
  /* Flex布局确保文本居中，同时固定容器尺寸 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px; /* 对应旋转后文本的高度，可根据需求调整 */
  height: 220px; /* 对应旋转后文本的宽度，文本越长值越大 */
  padding: 0;
  margin: 0;
  overflow: visible;
}

.vertical-header-text {
  transform: rotate(-90deg);
  white-space: nowrap; /* 强制文本不换行 */
  padding: 0;
  margin: 0;
  /* 如需微调文本位置，可使用transform-origin */
  /* transform-origin: center center; */
}

3. 在表格中应用自定义表头

以AG Grid为例，在列定义中指定自定义表头组件：

const columnDefs = [
  // 其他列配置...
  {
    headerName: '状态',
    field: 'status',
    headerComponent: VerticalHeader,
    headerComponentParams: {
      displayName: '启用/禁用'
    },
    width: 45, // 和容器width保持一致
    headerHeight: 220 // 和容器height保持一致
  }
];