Antd Table开启scroll.y纵向滚动时动态渲染列导致表头消失问题咨询

问题根因 #

• 动态生成的学科列的key属性配置错误：Antd Table 列配置的key是用于标识列唯一性的静态字符串，不能传入函数，你代码中写的key: (value, record, index) => \subject_${index}`属于非法配置，开启scroll.y`后 Antd 会将表头和表体拆分为两个独立DOM渲染，列标识异常会直接导致表头渲染失败。
• 列配置更新时Table存在DOM缓存：semester、classId变更后旧的表格DOM缓存没有被清空，和新的列配置不匹配。

修复步骤 #

1. 修正动态列的key配置
   修改setupColumns函数中生成学科列的代码，用唯一的学科ID作为列的key：

let children = data.map((val) => {
  return {
    title: (
      <span className={`table-header`}>{val.subject_info?.name}</span>
    ),
    // 把原来的函数key替换为静态唯一字符串
    key: `subject_${val.subject_id}`,
    width: 150,
    align: "center",
    ellipsis: true,
    render: (value, record) => {
      const point = record.average_transcript_info.find(
        (x) =>
          x.subject_id === val.subject_id &&
          x.semester === semester.key
      );
      return (
        <span>{point?.value_number}</span>
      );
    },
  };
});

2. 给Table绑定动态唯一key
   每次semester或classId变更时强制重渲染整个Table，避免DOM缓存问题：

<Table
  // 新增动态key
  key={`table_${classId}_${semester.key}`}
  dataSource={summaryData}
  columns={columns}
  bordered
  rowClassName={(record, index) =>
    index % 2 === 1
      ? "odd-row attendance-row"
      : "bg-white attendance-row"
  }
  pagination={false}
  scroll={{ x: "100vw", y: 580 }}
/>

修复后即可保留scroll.y配置，动态切换列时表头不会再消失。

内容的提问来源于stack exchange，提问作者Huan Huynh