zoukankan      html  css  js  c++  java
  • react引用Ant Design后,表格点击时添加背景色

    问题描述:

            Antd中新建一个表格后,默认只添加了鼠标经过事件,即:鼠标经过表格的每一行时,那一行就会添加一个淡色的背景。但是现在有需求,要给表格添加一个点击事件,就是在点击每一行时,也会添加一个背景效果。

    解决方法:

           查看Antd的官网文档可以发现,表格有rowClassName和onRow两个属性,我们通过这两个属性来实现表格的点击添加背景色效果。

     1、在<Table>标签中指定这两个属性,如下代码:

    <Table
        showHeader={false}
        columns={columns}
        dataSource={this.state.data}
        bordered={true}
        onRow={(record) => {
            return {
                onClick: (event) => {
                    this.setState({
                        rowId: record.key,
                    });
                    this._tableOnclick(event);   //调用表格点击事件
                },       // 点击行
                onDoubleClick: (event) => {},
                onContextMenu: (event) => {},
                onMouseEnter: (event) => {},  // 鼠标移入行
                onMouseLeave: (event) => {}
            };
        }}
        rowClassName={this.setRowClassName}
    />

    2、编写行点击事件和行添加类事件,如下代码:

    //表格添加点击背景色事件
    setRowClassName = (record) => {
        return record.key === this.state.rowId ? 'clickRowStyl' : '';
    }

    3、最后在样式文件中编写相应的样式代码:

    .clickRowStyl{
        background-color:lightgray
    }
    .ant-table-tbody>.clickRowStyl:hover>td{
        background-color:lightgray
    }

    4、最后效果如下图所示:

  • 相关阅读:
    TCP建立连接三次握手和释放连接四次握手
    集群/分布式环境下5种session处理策略
    MySQL两种引擎的区别
    【深入理解JVM】:类加载器与双亲委派模型
    Spring Cloud组件完整
    用Redis轻松实现秒杀系统
    分布式锁的基本原理
    中文分词-jieba
    win10安装mysql5.7.20解压版
    tenaorflow函数(1)
  • 原文地址:https://www.cnblogs.com/xuqw/p/11794608.html
Copyright © 2011-2022 走看看