如何实现Antd表格加载时默认选中第一行？

核心思路 #

通过维护选中行的状态，在表格数据加载完成后，将第一行的唯一标识设置为选中状态，配合Antd表格的rowSelection配置实现需求。

实现步骤及代码示例 #

1. 函数组件场景（React Hooks）

import { useState, useEffect } from 'react';
import { Table } from 'antd';

const MyTable = () => {
  const [dataSource, setDataSource] = useState([]);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  // 模拟异步加载数据
  useEffect(() => {
    const loadData = async () => {
      // 替换为实际接口请求逻辑
      const response = await fetch('/your-api-url');
      const data = await response.json();
      setDataSource(data);
      
      // 数据加载完成后，选中第一行
      if (data.length > 0) {
        setSelectedRowKeys([data[0].id]); // id对应表格rowKey指定的字段
      }
    };
    loadData();
  }, []);

  const rowSelection = {
    selectedRowKeys,
    onChange: (keys) => setSelectedRowKeys(keys),
  };

  // 表格列配置
  const columns = [
    { title: 'ID', dataIndex: 'id', key: 'id' },
    { title: '名称', dataIndex: 'name', key: 'name' },
    // 其他列...
  ];

  return (
    <Table
      rowKey="id"
      dataSource={dataSource}
      columns={columns}
      rowSelection={rowSelection}
    />
  );
};

export default MyTable;

2. 类组件场景

import React from 'react';
import { Table } from 'antd';

class MyTable extends React.Component {
  state = {
    dataSource: [],
    selectedRowKeys: [],
  };

  componentDidMount() {
    this.loadTableData();
  }

  loadTableData = async () => {
    const response = await fetch('/your-api-url');
    const data = await response.json();
    this.setState({ dataSource: data });
    
    if (data.length > 0) {
      this.setState({ selectedRowKeys: [data[0].id] });
    }
  };

  render() {
    const { dataSource, selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: (keys) => this.setState({ selectedRowKeys: keys }),
    };

    const columns = [
      { title: 'ID', dataIndex: 'id', key: 'id' },
      { title: '名称', dataIndex: 'name', key: 'name' },
      // 其他列...
    ];

    return (
      <Table
        rowKey="id"
        dataSource={dataSource}
        columns={columns}
        rowSelection={rowSelection}
      />
    );
  }
}

export default MyTable;

关键注意事项 #

• 必须正确设置表格的rowKey属性，值为数据中唯一标识字段（如id），否则选中状态会出现异常。
• 选中行的操作必须在数据加载完成后执行，避免因初始dataSource为空导致选中无效。
• 使用受控模式的rowSelection时，需确保selectedRowKeys与onChange回调配合，维持状态同步。

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