react引用Ant Design后，表格点击时添加背景色

问题描述：

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

解决方法：

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

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

<TableshowHeader={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、最后效果如下图所示：

react引用Ant Design后，表格点击时添加背景色相关推荐

antd 表格树如何展开_React Ant Design树形表格的复杂增删改
React Ant Design树形表格的复杂增删改最近由于业务接触了antd,使用antd完成一个复杂的树形表格的显示以及修改.在这其中碰见了很多坑,不少功能antd只写了初步的功能,更为细化 ...
前端技术学习记录：react+dvajs+ant design实现暴走计算器的页面重构（二）
前端技术学习记录:react+dvajs+ant design实现暴走计算器的页面重构(二) 前言定义 Model connect 起来更新state 拥抱变化主题切换更换页面获取当前设备类 ...
Ant Design Vue 表格筛选时只进行前台的按页筛选修改为后台的全局筛选
原因分析在我们使用 Ant Design Vue 表格筛选功能时会发现,如果只是按照例子来,只是前端的按页筛选,并不能都进行全局筛选,原因有两点: 1.我们筛选的时候,只是进行前端的数据过滤,并没有 ...
前端技术学习记录：react+dvajs+ant design实现暴走计算器的页面重构（一）
前端技术学习记录:react+dvajs+ant design实现暴走计算器的页面重构(一) 前言现在的效果安装 dva-cli 创建新应用预览项目文件结构简单介绍使用 antd做页面定义 ...
ant design vue 表格中时间戳转换成时间格式显示
ant design vue 表格中时间戳转换成时间格式显示原始数据表格如上图,因为接口传递过来的时间是10位int类型的时间戳格式,所以前端需要我们把时间格式化. step1 安装moment n ...
基于React、Ant Design的ButtonGroup组件
目录介绍使用方式安装使用 API Props children 介绍本组件基于React.Ant Design,适用于React + Ant Design项目本组件设计为超过一定数量的按钮 ...
记录ant design vue a-select Form编辑时回显数据库数据为value而不是label的问题
记录ant design vue a-select Form编辑时回显数据库数据为value而不是label的问题先贴解决后的代码 option遍历的集合格式如下解释官方文档中解释到select ...
React 基于ant design Pro 4 实现的一个分页, 自定义页码颜色
标题目录代码样式前言这是在 Ant Design Pro 4 中基于 ant design 的 Pagination 分页组件的基础上开发的. 有这么一个需求, 页码的颜色基于该页是否有差异, ...
ant design vue 表格table 默认选择几项getCheckboxProps
首先我们看一下场景在table组件里默认选择第一项,如下图所示: 查看table文档后发现只有getCheckboxProps或许能修改checkbox 文档说是一个函数,然后就写一个方法,有一个默认 ...

react引用Ant Design后，表格点击时添加背景色

问题描述：

解决方法：

react引用Ant Design后，表格点击时添加背景色相关推荐

最新文章

热门文章