Antd表格鼠标悬停单元格变色教程：实现行级交互效果

在Antd中，你可以使用CSS伪类选择器:hover来实现鼠标悬停时单元格变色的效果。首先，你需要为Table组件的某一行的单元格添加一个自定义类名，以便于选择器使用。然后，在CSS中定义该类名的样式，使用:hover伪类选择器来设置鼠标悬停时的样式。\n\n以下是一个示例代码：\n\njsx\nimport { Table } from 'antd';\nimport React from 'react';\nimport './table.css';\n\nconst dataSource = [\n {\n key: '1',\n name: 'John',\n age: 32,\n address: 'New York',\n },\n {\n key: '2',\n name: 'Mike',\n age: 25,\n address: 'London',\n },\n // ...\n];\n\nconst columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n className: 'hoverable-cell', // 添加自定义类名\n },\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n className: 'hoverable-cell', // 添加自定义类名\n },\n {\n title: 'Address',\n dataIndex: 'address',\n key: 'address',\n className: 'hoverable-cell', // 添加自定义类名\n },\n];\n\nconst CustomTable = () => {\n return <Table dataSource={dataSource} columns={columns} />;\n};\n\nexport default CustomTable;\n\n\n然后，在table.css文件中定义.hoverable-cell类的样式：\n\ncss\n.hoverable-cell:hover {\n background-color: #e6f7ff; // 设置鼠标悬停时的背景色\n cursor: pointer; // 设置鼠标悬停时的光标样式\n}\n\n\n这样，当鼠标悬停在Table的某一行上时，该行中的单元格会变色。