用到了Table的rowClassName属性和onRow属性
首先说rowClassName
- 它的值是一个函数,参数有两个,第一个是当前行数据,第二个是索引
再说onRow
- onRow也有两个参数,第一个参数是当前行数据,第二个参数是这行所对应的索引
核心思想就是,通过onRow里面的事件(我们这里用点击事件)存储(点击这行的)索引。然后再通过rowClassName属性,把获得的索引与rowClassName的值(函数)的索引进行一一对比,只要它俩相等,就给这行单独加个类名。我们就可以给类名加样式了
具体代码如下
A.jsx文章来源:https://www.toymoban.com/news/detail-639631.html
import React, { useEffect, useState } from 'react'
import { Radio, Checkbox, Space, Select, Input, Table, Button } from 'antd'
import './A.scss'
export default function A() {
const [oneData, setOneData] = useState([...])
const columns = [...]
return (
<div className='box'>
<Table
columns={columns}
dataSource={oneData}
rowKey={(record) => record.id}
rowClassName={(_, index) => (index === rowIndex ? 'rowBgColor' : '')}
onRow={(record, index) => {
return {
onClick: () => {
// 确定点击的是哪一行
setRowIndex(index)
},
}
}}
/>
</div>
)
}
A.scss文章来源地址https://www.toymoban.com/news/detail-639631.html
.box{
// 点击某一行的样式
.rowBgColor {
background-color: #99bbff;
}
// 去除鼠标经过默认的背景颜色
.ant-table-tbody>tr.ant-table-row:hover>td {
background: none !important;
}
}
到了这里,关于antd组件的Table,点击某一行,让这行整体变色的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!