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

Question

我在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,
            }}
          />

Answer 1

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,
  }}
/>