如何实现Ant Design Table选中行的上下切换功能？

需求说明 #

在Ant Design Table中选中某一行后，点击「previous move」按钮选中当前行的上一行，点击「next move」按钮选中当前行的下一行。例如选中“Jim Green”时，点击上移按钮选中“John Brown”，点击下移按钮选中“Joe Black”。

实现步骤 #

1. 开启单选模式并管理选中状态
   给Table添加rowSelection配置，使用useState保存当前选中的行key，同时监听行选中事件更新状态。

2. 保存当前表格的有效数据
   因为表格支持过滤、排序，实际展示的数据源可能和原始数据不同，所以需要在Table的onChange回调中保存当前的过滤后数据（extra.currentDataSource），确保上下切换基于当前展示的行。

3. 实现上下切换逻辑

   • 在onClickPrev中，找到当前选中行在有效数据中的索引，若索引大于0，则选中上一行的key；
   • 在onClickNext中，找到当前选中行的索引，若索引小于有效数据长度-1，则选中下一行的key。

修改后的完整代码 #

import React, { useState } from 'react';
import 'antd/dist/antd.css';
import './index.css';
import { Table } from 'antd';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    filters: [
      {
        text: 'Joe',
        value: 'Joe',
      },
      {
        text: 'Category 1',
        value: 'Category 1',
        children: [
          {
            text: 'Yellow',
            value: 'Yellow',
          },
          {
            text: 'Pink',
            value: 'Pink',
          },
        ],
      },
      {
        text: 'Category 2',
        value: 'Category 2',
        children: [
          {
            text: 'Green',
            value: 'Green',
          },
          {
            text: 'Black',
            value: 'Black',
          },
        ],
      },
    ],
    filterMode: 'tree',
    filterSearch: true,
    onFilter: (value, record) => record.name.includes(value),
    width: '30%',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    sorter: (a, b) => a.age - b.age,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    filters: [
      {
        text: 'London',
        value: 'London',
      },
      {
        text: 'New York',
        value: 'New York',
      },
    ],
    onFilter: (value, record) => record.address.startsWith(value),
    filterSearch: true,
    width: '40%',
  },
];
const originalData = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 32,
    address: 'London No. 2 Lake Park',
  },
];

const App = () => {
  const [selectedRowKey, setSelectedRowKey] = useState('');
  const [currentDataSource, setCurrentDataSource] = useState(originalData);

  const onChange = (pagination, filters, sorter, extra) => {
    // 保存当前表格展示的数据源（过滤/排序后）
    setCurrentDataSource(extra.currentDataSource);
    console.log('params', pagination, filters, sorter, extra);
  };

  const onClickPrev = () => {
    if (!selectedRowKey) return;
    const currentIndex = currentDataSource.findIndex(item => item.key === selectedRowKey);
    if (currentIndex > 0) {
      setSelectedRowKey(currentDataSource[currentIndex - 1].key);
    }
  };

  const onClickNext = () => {
    if (!selectedRowKey) return;
    const currentIndex = currentDataSource.findIndex(item => item.key === selectedRowKey);
    if (currentIndex < currentDataSource.length - 1) {
      setSelectedRowKey(currentDataSource[currentIndex + 1].key);
    }
  };

  const rowSelection = {
    type: 'radio',
    selectedRowKeys: [selectedRowKey],
    onChange: (keys) => {
      setSelectedRowKey(keys[0] || '');
    },
  };

  return (
    <div>
      <button onClick={onClickPrev}>previous move</button>
      <button onClick={onClickNext}>next move</button>
      <Table 
        columns={columns} 
        dataSource={originalData} 
        onChange={onChange}
        rowSelection={rowSelection}
      />
    </div>
  );
};
export default App;

关键说明 #

• 开启了单选模式rowSelection={{ type: 'radio', ... }}，确保每次只能选中一行；
• 通过currentDataSource保存表格当前展示的数据源，适配过滤、排序后的场景；
• 上下切换时先判断当前选中行的位置，避免越界操作；
• 未选中任何行时，点击按钮无响应，避免错误。

内容的提问来源于stack exchange，提问作者Joseph Park