antd组件的Table,点击某一行,让这行整体变色

这篇具有很好参考价值的文章主要介绍了antd组件的Table,点击某一行,让这行整体变色。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

用到了Table的rowClassName属性和onRow属性

首先说rowClassName

antd table 点击行变色,javascript,前端,react.js

  • 它的值是一个函数,参数有两个,第一个是当前行数据,第二个是索引

再说onRow

antd table 点击行变色,javascript,前端,react.js

  •  onRow也有两个参数,第一个参数是当前行数据,第二个参数是这行所对应的索引 

核心思想就是,通过onRow里面的事件(我们这里用点击事件)存储(点击这行的)索引。然后再通过rowClassName属性,把获得的索引与rowClassName的值(函数)的索引进行一一对比,只要它俩相等,就给这行单独加个类名。我们就可以给类名加样式了

具体代码如下

A.jsx

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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包