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、最后效果如下图所示:

  • 相关阅读:
    原生,js,自执行函数的三种写法,及特性
    js延迟加载的六种方式
    antd table 合并行的方法
    css 常用样式antd design 中table,表格省略号处理的问题
    axios 中文文档
    js ,几张遍历,循环的方法
    javascript怎么保留两位小数
    Category(十九)
    Protocol(协议)(二十)
    Extension延展(十八)
  • 原文地址:https://www.cnblogs.com/xuqw/p/11794608.html
Copyright © 2011-2022 走看看