antd table鼠标移入整行改变样式
时间: 2023-10-09 09:08:27 浏览: 238
antd design table更改某行数据的样式操作
5星 · 资源好评率100%
可以通过CSS的:hover伪类来实现鼠标移入整行改变样式的效果。
首先,在table的CSS样式中,添加以下代码:
```
tr:hover {
background-color: #f5f5f5;
cursor: pointer;
}
```
这里我们设置鼠标移入tr元素时,将背景颜色设置为浅灰色,并将鼠标样式设置为手型。
然后,在antd的Table组件中,设置rowClassName属性为一个函数,该函数返回样式类名,代码如下:
```
<Table
dataSource={dataSource}
columns={columns}
rowClassName={() => 'table-row'}
/>
```
其中,table-row为我们定义的样式类名,代码如下:
```
.table-row:hover {
background-color: #f5f5f5;
cursor: pointer;
}
```
这里我们设置鼠标移入table-row元素时,将背景颜色设置为浅灰色,并将鼠标样式设置为手型。
这样,当鼠标移入antd的Table组件中的一行时,该行就会改变样式。
阅读全文