antd table 行点击事件及行高亮显示

最新推荐文章于 2025-07-11 15:14:09 发布

原创最新推荐文章于 2025-07-11 15:14:09 发布 · 2.8w 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#antd #react #table

react 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在antd的React表格组件中实现行点击事件和行高亮显示。通过设置rowClassName属性添加样式，并利用onRow属性绑定onClick事件来响应行点击。代码示例中详细注释了实现过程，可参考相关博客文章。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.antd官网表格组件：

https://ant.design/components/table-cn/#components-table-demo-dynamic-settings

2.引用antd的表格组件，即：

import {Table} from ‘antd’；

渲染表格组件：

说明：

（1）rowClassName属性是添加表格行样式属性，此时的this.setClassName方法为点击行之后为其添加行高亮样式。

（2）onRow是给表格行添加点击onClick事件，也可在其内部添加其他事件，如鼠标移入、移出等。

（3）下面为实现代码：（本人对代码均做了注释说明，大家可参考）

            //antd表格组件
            <Table
                  pagination={{  // 分页
                  current: this.state.Current,
                  total: this.state.total,
                  pageSize:this.props.pageSize,
                  onChange: this.antdPage,
                }}  
                dataSource={this.state.dataSource}   //表格数据渲染
                scroll={{ x: this.props.scrollX }}   //表格内弄的横向滚动
                className={`${style['l-table-td']}`} //给表格列添加不换行样式
                rowClassName={this.setClassName} //表格行点击高亮
                onRow={(record) => {//表格行点击事件
                  return {
                    onClick: this.clickRow.bind(this,record.no)
                  };
                }}
                />
             clickRow(num){
                 this.setState({
                  activeIndex:(num-1)//获取点击行的索引
                 })
      
            }
            setClassName=(record,index)=>{//record代表表格行的内容，index代表行索引
              //判断索引相等时添加行的高亮样式
              return index === this.state.activeIndex ? `${style['l-table-row-active']}` : "";
            }

参考：

https://blog.youkuaiyun.com/weixin_41652466/article/details/80697463

https://ant.design/components/table-cn/#components-table-demo-dynamic-settings