Ant Design Table 行悬停变色实现教程 - 使用 rowClassName 和 鼠标事件

{/'title/':/'Ant Design Table 行悬停变色实现教程 - 使用 rowClassName 和 鼠标事件/',/'description/':/'本文介绍了如何使用 Ant Design Table 组件的 rowClassName 属性和鼠标事件，实现鼠标悬停到每一行时，某一属性变色的效果。详细步骤包括设置 rowClassName 回调函数、定义 CSS 样式和处理鼠标悬停事件。/',/'keywords/':/'Ant Design, Table, 鼠标悬停, 行变色, rowClassName, 样式, 鼠标事件, React/',/'content/':/'要实现鼠标悬停到每一行上某一属性变色，你需要使用Table组件的rowClassName属性来自定义每一行的样式。具体步骤如下：//n//n1. 首先，导入Table组件和样式相关的库：//n//njsx//nimport { Table } from 'antd';//nimport 'antd/dist/antd.css';//n//n//n2. 在Table组件中，设置rowClassName属性为一个回调函数，该函数接收一个参数record，表示当前行的数据，返回一个字符串作为该行的className。你可以在这个回调函数中判断鼠标是否悬停在该行上，如果是，则返回一个自定义的className，否则返回空字符串。//n//njsx//nconst dataSource = [//n // 数据源//n];//n//nconst columns = [//n // 列配置//n];//n//nconst rowClassName = (record, index) => {//n // 判断鼠标是否悬停在该行上//n if (record.hovered) {//n // 返回自定义的className//n return 'hovered-row';//n }//n return '';//n};//n//nconst App = () => {//n return (//n <Table//n dataSource={dataSource}//n columns={columns}//n rowClassName={rowClassName}//n />//n );//n};//n//n//n3. 在CSS文件中定义.hovered-row样式，用于设置鼠标悬停时的行样式。//n//ncss//n.hovered-row {//n background-color: #f5f5f5;//n}//n//n//n4. 在鼠标悬停事件中，更新数据源中每一行的hovered属性。你可以使用useState来管理数据源。//n//njsx//nimport { useState } from 'react';//n//nconst [dataSource, setDataSource] = useState([//n // 数据源//n]);//n//nconst handleMouseEnter = (index) => {//n setDataSource((prevDataSource) => {//n const newDataSource = [...prevDataSource];//n newDataSource[index].hovered = true;//n return newDataSource;//n });//n};//n//nconst handleMouseLeave = (index) => {//n setDataSource((prevDataSource) => {//n const newDataSource = [...prevDataSource];//n newDataSource[index].hovered = false;//n return newDataSource;//n });//n};//n//nconst rowClassName = (record, index) => {//n if (record.hovered) {//n return 'hovered-row';//n }//n return '';//n};//n//nconst App = () => {//n return (//n <Table//n dataSource={dataSource}//n columns={columns}//n rowClassName={rowClassName}//n onMouseEnter={(e) => handleMouseEnter(e.currentTarget.rowIndex - 1)}//n onMouseLeave={(e) => handleMouseLeave(e.currentTarget.rowIndex - 1)}//n />//n );//n};//n//n//n这样，当鼠标悬停在每一行上时，该行的背景色就会变为自定义的颜色。/