Ant Design Table点击单元格如何获取对应column索引或列名？

实现需求的三种可行方案 #

方案1：在columns配置中单独给每列绑定单元格点击事件（最常用，适配所有场景）

你可以直接在定义columns数组时，给每列配置onCell属性，该属性可以直接获取当前列的固定信息、点击行的所有数据和行索引，不需要修改现有Table的其他配置：

const columns = [
  {
    title: '天数',
    dataIndex: 'days',
    key: 'days',
    onCell: (record, rowIndex) => {
      return {
        onClick: () => {
          // 这里直接可以拿到当前列的标识、行索引，直接处理弹框逻辑即可
          const updated = { ...this.state }
          // 直接根据当前列的key匹配对应的模态框
          updated.modals.days.isVisible = true;
          updated.selectedRowIndex = rowIndex;
          this.setState(updated)
        }
      }
    }
  },
  // 其余列按同样规则配置即可
  // 如果是动态生成的columns，遍历的时候直接把列索引、列key动态传入即可
]

方案2：通过自定义Table单元格组件全局统一处理（适合动态列/列数量多的场景）

你现有代码已经传入了components属性，只需要自定义body的cell组件即可直接拿到所有列、行相关参数：

const components = {
  body: {
    cell: (props) => {
      // props自带参数：column（当前列完整配置）、record（当前行数据）、rowIndex（行索引）、colIndex（列索引）
      const { column, record, rowIndex, colIndex } = props;
      return <td 
        {...props}
        onClick={() => {
          console.log('当前列索引：', colIndex);
          console.log('当前列标识：', column.key || column.dataIndex);
          // 在这里统一根据列标识触发对应模态框即可
          const updated = { ...this.state }
          updated.modals[column.dataIndex].isVisible = true;
          updated.selectedRowIndex = rowIndex;
          this.setState(updated)
        }}
      />
    }
  }
}

方案3：在原有onRow点击事件中反查列信息（不推荐，仅适合无合并列、无固定列的简单场景）

如果不想修改现有配置，也可以通过点击事件的DOM节点反查列索引：

<Table
  // 其余原有配置保持不变
  onRow={(record, rowIndex) => {
    return {
      onClick: event => {
        // 找到点击的单元格DOM
        const cellNode = event.target.closest('td');
        if (cellNode) {
          const colIndex = cellNode.cellIndex;
          const currentColumn = columns[colIndex];
          console.log('当前列信息：', currentColumn);
          // 后续弹框逻辑
        }
      },
    };
  }}
/>

优先选择前两种方案，官方原生支持，兼容性更强，不受单元格合并、固定列等特殊配置影响

内容的提问来源于stack exchange，提问作者Cristian Sfetcu