vue ts里arco-design table每次rowclick,点击某一行的的时候哪一行的颜色变化,默认第一条

在 antd-design 的 Table 中，点击某一行时，该行的背景颜色会发生变化。要想在 TypeScript 中使用 antd-design 的 Table，需要在代码中引入相应的类型声明，如下所示：

import { Table } from 'antd';
import { ColumnsType } from 'antd/lib/table';

其中，`ColumnsType` 是 antd-design 的 Table 组件中列的类型声明。在 Table 中，可以使用 `rowClassName` 属性来设置某一行的类名，从而实现点击某一行时改变该行的背景颜色。具体来说，可以在 `rowClassName` 属性中编写一个函数，根据当前行的索引来判断该行是否被选中，如果是则返回选中状态的类名，否则返回默认的类名。示例如下：

interface TableRow {
  id: number;
  name: string;
  age: number;
}

const data: TableRow[] = [
  {
    id: 1,
    name: 'John',
    age: 20,
  },
  {
    id: 2,
    name: 'Mary',
    age: 25,
  },
  {
    id: 3,
    name: 'Peter',
    age: 30,
  },
];

const columns: ColumnsType<TableRow> = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
];

function MyTable() {
  const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]);
  
  function handleRowClick(row: TableRow) {
    setSelectedRowKeys([row.id]);
  }
  
  function getRowClassName(record: TableRow, index: number): string {
    if (record.id === selectedRowKeys[0]) {
      return 'selected-row';
    }
    return '';
  }
  
  return (
    <Table
      dataSource={data}
      columns={columns}
      rowClassName={getRowClassName}
      onRow={(record) => ({
        onClick: () => handleRowClick(record),
      })}
    />
  );
}

在上述代码中，我们首先定义了一个 `data` 数组，表示表格中的数据。然后，我们定义了 `columns` 数组，表示表格中的列。接着，我们定义了一个 `MyTable` 组件，其中使用了 `useState` 钩子来保存当前选中的行的索引。在组件中，我们编写了一个 `handleRowClick` 函数，用于处理行的点击事件。每次点击行时，我们都会调用该函数，并将当前行的索引保存到 `selectedRowKeys` 中。此外，我们还编写了一个 `getRowClassName` 函数，用于获取每一行的类名。在该函数中，我们根据当前行的索引和选中的行的索引来判断该行是否被选中。如果是，则返回选中状态的类名，否则返回默认的类名。最后，我们将 `getRowClassName` 函数传递给 `rowClassName` 属性，以实现选中行的背景颜色变化。同时，我们还使用 `onRow` 属性来监听行的点击事件，并在事件处理函数中调用 `handleRowClick` 函数。