如何调整Ant Design Table组件行选择与展开行的显示顺序

安全阿岳

2026-6-28

调整Ant Design Table行选择与展开行的显示顺序

Ant Design Table默认会把选择列放在最左侧，展开图标列紧随其后，调整props顺序没用——因为组件内部固定了默认列的插入逻辑。可以通过以下两种方式实现顺序调换：

方式一：使用组件自带配置项（推荐）

利用rowSelection的columnIndex和expandable的expandIconColumnIndex属性，直接指定两列的位置：

<Table
  dataSource={dataSource}
  pagination={false}
  rowKey={(record) => record.id}
  rowSelection={{
    ...rowSelection,
    columnIndex: 1, // 选择列插入到第1个位置（索引从0开始）
  }}
  expandable={{
    expandedRowRender,
    expandIcon: customExpandIcon,
    expandIconColumnIndex: 0, // 展开图标列放在第0位
  }}
  columns={yourColumns} // 你的业务列数组
/>

这样就能让展开图标列显示在选择列左侧，完全通过配置实现，无需自定义列。

方式二：自定义列实现更灵活控制

如果需要更个性化的布局，可以隐藏默认展开图标，自己在columns数组中添加展开列：

先在expandable中隐藏默认展开图标：

expandable={{
  expandedRowRender,
  expandIcon: () => null, // 禁用默认展开图标
}}

维护展开状态的expandedKeys（通过useState管理），然后在columns中添加自定义展开列：

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

const handleExpand = (record) => {
  const newExpandedKeys = expandedKeys.includes(record.id)
    ? expandedKeys.filter(key => key !== record.id)
    : [...expandedKeys, record.id];
  setExpandedKeys(newExpandedKeys);
};

// 自定义展开列
const customExpandColumn = {
  title: '',
  key: 'expand',
  render: (_, record) => customExpandIcon({
    record,
    expanded: expandedKeys.includes(record.id),
    onClick: () => handleExpand(record),
  }),
};

// 最终columns数组
const columns = [customExpandColumn, ...yourBusinessColumns];