Ant Design Table如何将选择列设为展开图标后的第二列

实现方案 #

直接通过Ant Design Table内置的列常量配置即可，无需额外引入state变量控制列顺序，核心是手动把展开列、选择列按你需要的顺序写到columns数组头部，替代Table自动插入的默认列。

前置依赖

Ant Design 版本 ≥ 5.8.0，官方提供了EXPAND_COLUMN、SELECTION_COLUMN两个内置常量，直接复用官方默认的展开、选择交互逻辑，无需自己手动实现功能。

代码示例

1. 引入依赖

import { Table, EXPAND_COLUMN, SELECTION_COLUMN } from 'antd';

2. 列配置按需求排序

const columns = [
  // 第一列：展开图标列
  {
    key: EXPAND_COLUMN,
    width: 50,
    align: 'center'
  },
  // 第二列：复选框选择列
  {
    key: SELECTION_COLUMN,
    width: 50,
    align: 'center'
  },
  // 后续为自定义业务列
  {
    title: '数据名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '数据值',
    dataIndex: 'value',
    key: 'value'
  }
];

3. Table组件常规配置

<Table
  columns={columns}
  dataSource={你的数据源}
  // 可正常配置展开相关参数，不影响列顺序
  expandable={{
    expandedRowRender: (record) => <div>{record.expandContent}</div>
  }}
  // 可正常配置选择相关参数，不影响列顺序
  rowSelection={{
    onChange: (selectedRowKeys, selectedRows) => {
      console.log('选中项：', selectedRows)
    }
  }}
/>

低版本兼容方案

如果你的Ant Design版本低于5.8.0，手动实现两列的渲染逻辑即可，原理和上面一致：

const [expandedKeys, setExpandedKeys] = useState([]);
const [selectedRowKeys, setSelectedRowKeys] = useState([]);

const columns = [
  // 第一列：手动实现展开列
  {
    width: 50,
    render: (_, record) => (
      <span
        onClick={() => {
          setExpandedKeys(prev => 
            prev.includes(record.key) 
              ? prev.filter(k => k !== record.key) 
              : [...prev, record.key]
          )
        }}
        style={{ cursor: 'pointer' }}
      >
        {expandedKeys.includes(record.key) ? '▼' : '▶'}
      </span>
    )
  },
  // 第二列：手动实现选择列
  {
    width: 50,
    render: (_, record) => (
      <input
        type="checkbox"
        checked={selectedRowKeys.includes(record.key)}
        onChange={(e) => {
          if (e.target.checked) {
            setSelectedRowKeys(prev => [...prev, record.key])
          } else {
            setSelectedRowKeys(prev => prev.filter(k => k !== record.key))
          }
        }}
      />
    )
  },
  // 后续业务列...
]

<Table
  columns={columns}
  dataSource={你的数据源}
  expandable={{
    expandedRowKeys: expandedKeys,
    expandedRowRender: (record) => <div>{record.expandContent}</div>,
    showExpandColumn: false // 关闭默认生成的展开列
  }}
  rowSelection={{
    selectedRowKeys: selectedRowKeys,
    onChange: setSelectedRowKeys,
    hideSelectAll: false, // 可按需配置全选
    columnWidth: 0 // 隐藏默认生成的选择列
  }}
/>

内容的提问来源于stack exchange，提问作者Tien Pham Vu Kieu