react+andtui组件实现table中加勾选框,点击选中就选中这一行的数据

我在table中加了勾选框没有实现点击这一行就选中这一行而是选中了所有的,感觉是缺少什么唯一值

   const columns = [
        {
          title: '方案编号',
          dataIndex: 'solutionNo',
          key: 'col1',
          with:'200px',
        },
        {
          title: '方案名称',
          dataIndex: 'solutionName',
          key: 'col2',
          with:'200px',
        },
        {
          title: '项目名称',
          dataIndex: 'interfaceName',
          key: 'col3',
          with:'200px',
        },
        {
            title: '窗体定义',
            dataIndex: 'interfaceName',
            key: 'col4',
            with:'200px',
          },
      
      ];

// // 处理当用户选择行时的事件
    const handleRowSelection = record => {
      debugger
      const newSelectedRows = [...selectedRows];
      if (newSelectedRows.some(row => row.key === record.key)) {
        // 如果记录已经被选中，将其从所选记录中删除
        setSelectedRows(newSelectedRows.filter(row => row.key !== record.key));
      } else {
        // 否则将其添加到所选记录中
        newSelectedRows.push(record);
        setSelectedRows(newSelectedRows);
      }
    };
 <Table
            dataSource={loctiondata}
            columns={columns}
            rowSelection={{
              type: 'checkbox',
              selectedRowKeys: selectedRows.map(row => row.key),
              onChange: handleRowSelection,
            }}
          />

const loctiondata = [
  { key: '1', solutionNo: '1', solutionName: 'Solution 1', interfaceName: 'Interface 1' },
  { key: '2', solutionNo: '2', solutionName: 'Solution 2', interfaceName: 'Interface 2' },
  // 添加更多行...
];

const columns = [
  {
    title: '方案编号',
    dataIndex: 'solutionNo',
    key: 'col1',
    width: '200px',
  },
  {
    title: '方案名称',
    dataIndex: 'solutionName',
    key: 'col2',
    width: '200px',
  },
  {
    title: '项目名称',
    dataIndex: 'interfaceName',
    key: 'col3',
    width: '200px',
  },
  {
    title: '窗体定义',
    dataIndex: 'interfaceName',
    key: 'col4',
    width: '200px',
  },
];

// 处理当用户选择行时的事件
const handleRowSelection = record => {
  const newSelectedRows = [...selectedRows];
  if (newSelectedRows.some(row => row.key === record.key)) {
    // 如果记录已经被选中，将其从所选记录中删除
    setSelectedRows(newSelectedRows.filter(row => row.key !== record.key));
  } else {
    // 否则将其添加到所选记录中
    newSelectedRows.push(record);
    setSelectedRows(newSelectedRows);
  }
};

<Table
  dataSource={loctiondata}
  columns={columns}
  rowSelection={{
    type: 'checkbox',
    selectedRowKeys: selectedRows.map(row => row.key),
    onChange: handleRowSelection,
  }}
/>

两个错误，
with应该是width，表示列的宽度，而不是with
rowSelection中selectedRowKeys属性应该是一个字符串数组，而不是一个对象数组。需要将selectedRowKeys中的key属性改为字符串类型。

已经解决了是因为我获取到的数据没有指定唯一的值:

  const item = {
            id:slprogrammeData.id,
            solutionNo: slprogrammeData.solutionNo,
            solutionName: slprogrammeData.solutionName,
            objectName: projectInfoData.objectName,
            interfaceName: interfaceData.interfaceName,
          };
// 处理行选择事件
    const handleRowSelection = (selectedRowKeys) => {
      setSelectedRows(selectedRowKeys.map((key) => loctiondata.find((data) => data.id === key)));
    };

 <Table
            dataSource={loctiondata}
            columns={columns}
            rowKey={(record) => record.id}
            rowSelection={{
              type: 'checkbox',
              selectedRowKeys: selectedRows.map((row) => row.id),
              onChange: handleRowSelection,
            }}
          />

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7675183
• 这篇博客你也可以参考下：react 封装通用组件之table组件
• 除此之外, 这篇博客: 在React中插入可编辑的table表格中的 数据操作 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

import { observable, action, toJS } from 'mobx'
import $mock from './mock.json'

class State {
  @observable topThreeDTO = []//均价前三名
  @observable isDisableFlag1 = true//表格新增按钮是否禁用

  @action queryDetails = async () => {
    const res = await $mock
    console.log(res);

    if (res.code == 200) {
      this.topThreeDTO = res.modelList
    }}
}
export default new State();