tdesign中t-table如何点击高亮

在TDesign库的`t-table`组件中，点击高亮是一种常见的交互效果，它可以让用户明确地看到当前选中的行。要在`t-table`中实现点击高亮，通常需要以下几个步骤：

1. 首先，在`t-table`的列配置里，你可以设置`onRowClick`事件处理器，当用户点击某一行时触发。

import { TdTable } from '@tdesign/components-react';

const tableData = ...; // 表格数据

<TdTable
  data={tableData}
  onRowClick={(record, index) => {
    // 当点击某一行时，这里可以更新状态来标记高亮行
    handleHighlight(index);
  }}
/>

2. 然后创建一个状态变量来表示当前高亮的行索引，并提供一个`handleHighlight`函数来处理高亮操作。

const [highlightIndex, setHighlightIndex] = useState(null);

// ...
const handleHighlight = (index: number) => {
  if (highlightIndex !== null && highlightIndex !== index) {
    setHighlightIndex(null); // 如果已有高亮，取消高亮
  }
  setHighlightIndex(index);
};

3. 最后，根据`highlightIndex`更新表格的样式，比如通过CSS类名给高亮行添加样式。例如：

.td-table-row-highlighted {
  background-color: lightblue;
}

<td className={`${highlightIndex === record.index ? 'td-table-row-highlighted' : ''}`}>{record.columnValue}</td>