如何在Ant Design表格列中添加按钮？Cell组件使用无效求助

看起来你是想在Ant Design表格的单元格里自定义按钮，但用Cell组件的方式没生效对吧？其实Ant Design Table的列自定义内容，通常不是直接用Cell组件，而是通过列配置里的render属性（v4及之前）或者render/components（v5）来实现，下面给你两种版本的正确写法：

情况1：Ant Design Table v4 及更早版本 #

在columns数组的对应列中，使用render属性来返回自定义按钮：

const columns = [
  // 其他列配置...
  {
    title: '操作',
    dataIndex: 'name', // 对应数据源里的字段名
    key: 'action',
    render: (text, record) => (
      <button value={record.name} onClick={() => props.handleClickGroup(record)}>
        {record.name}
      </button>
    )
  }
];

// 在Table组件中使用配置好的columns
<Table columns={columns} dataSource={yourDataSource} />

这里要注意：render函数会接收三个参数——text（当前单元格的字段值）、record（当前行的完整数据）、index（行索引），直接通过record获取行数据里的name会比你之前用cell.row.values更直观可靠。

情况2：Ant Design Table v5 版本 #

v5的Table写法有一些调整，自定义单元格最常用的还是列配置里的render属性：

const columns = [
  // 其他列配置...
  {
    title: '操作',
    dataIndex: 'name',
    key: 'action',
    render: (_, record) => (
      <button value={record.name} onClick={() => props.handleClickGroup(record)}>
        {record.name}
      </button>
    )
  }
];

// Table组件使用示例
<Table columns={columns} dataSource={yourDataSource} />

如果需要全局自定义单元格样式或内容，可以用components配置，但这种方式会替换所有单元格，仅适合全局统一修改的场景：

const CustomCell = ({ children, record }) => (
  <td>
    <button value={record.name} onClick={() => props.handleClickGroup(record)}>
      {record.name}
    </button>
  </td>
);

<Table
  columns={columns}
  dataSource={yourDataSource}
  components={{
    body: {
      cell: CustomCell,
    },
  }}
/>

你之前的代码里直接用Cell: ({ cell }) => ...，应该是混淆了自定义组件的正确用法——Ant Design Table的列配置里并没有直接的Cell配置项，这也是导致代码未生效的原因哦~

内容的提问来源于stack exchange，提问作者Mayank Raj