Antd Table 点击行变换背景颜色 (Antd React)

需求

实现的目标是，点击这一行，然后出现一个modal，这个modal可以拖拽，并且可以知道是点击哪一行出现的事件。
那么需要做的就是，点击这一行，然后其背景颜色变化。

实现

Antd Table有 rowClassName 属性，可以在 css设置其样式，那么我们只要

点击行，然后记录点击的 rowkey
rowClassName设为一个函数，读取(record, index) ，判断其index 是否等于rowkey，如果等于就return一个类名。

代码

 {/* Table组件，其中在 onClick中，setState 记录 rowkeywei */}<Table id="table-to-xls"size="small"loading={loading}columns={columns}dataSource={data}pagination={{ pageSize: 10 }}rowKey={record => record.uid}rowClassName={this.getRowClassName}onRow={(record, rowkey)=>{return{//点击行 record 指的本行的数据内容，rowkey指的是本行的索引onClick : this.onClick.bind(this, record, rowkey)    }}}/>// 函数getRowClassName = (record, index) => {const clickRow = this.state.clickRow;let className = 'normal';if(index === clickRow) {className = 'blue';}return className;}<!-- css代码 -->.blue {background-color: #00a0e9;}

Antd Table 点击行变换背景颜色 (Antd React)相关推荐

Html table 页实现点击选中tr行改变背景颜色
Html table 页实现点击选中tr行改变背景颜色 table 表格展示数据时没有选中的效果,如果对展示数据做了一些操作会导致不太容易分辨,所以选中效果就很重要,而这个事件需要作用于整个 ...
鼠标滑过GridView的数据行时修改行的背景颜色
基本原理可以参考另一篇文章:鼠标滑过table时修改表格行的背景颜色下面是针对GridView实现该效果的代码:就是编写GridView控件的RowDataBound事件的代码. 1 protect ...
idea编辑区左侧行号背景颜色修改
idea编辑区左侧行号背景颜色修改曾几何时,瞎改了一下这个区域的颜色: 后面隔了一段时间,忘记怎么改回了.今天找了很久终于找到修改的地方,记录一下: file->>setting-> ...
java中的各行换色_隔行变换背景颜色和颜色预警
需求说明隔行变换背景颜色:单一背景颜色的报表会让报表浏览者产生眼晕的感觉,通过适当交替的背景色能增加视觉舒适度,也会给页面美工增色不少.此需求是报表展现时最普通最常见的需求. 颜色预警:报表中的某些 ...
android 自定义radiobutton 样式,RadioButton自定义点击时的背景颜色
一.应用场景: 在使用 RadioButton 时,有时我们会需要自定义点击时改变背景颜色的效果. 效果图: RadioButton自定义背景颜色.jpg 二.实现步骤: 1.新建一组 RadioBu ...
关于element-ui 中 table 鼠标悬停时高亮背景颜色的修改，添加fixed后颜色又出现问题
table 鼠标悬停时高亮背景颜色的修改 .el-table tbody tr:hover>td { background-color: #颜色 } 或 .el-table__body-wrap ...
vxe-table 将表格指定行设置背景颜色后，选中行、悬浮行样式失效解决。
目录一. 表格悬浮行.选中行高亮 1.效果 2.代码二. 初始化表格指定行设置背景颜色 1. 效果 2.代码 3. 问题三. 解决选中行.悬浮行样式失效 1. 效果 2.代码一. 表格悬浮行 ...
表格通用样式el-table的表头颜色样式，表内边框行高样式，点击行高亮变颜色
1-1,如下代码写在el-table标签上 :height='400' style="width: 100%" :header-cell-style="{'text-al ...
选中表格行高亮html,table选中的行以指定颜色高亮显示
table选中的行以指定颜色高亮显示 1 三星 AA 2 Norkia BB 3 苹果 CC 4 联想 DD

Antd Table 点击行变换背景颜色 (Antd React)

需求

实现

代码

Antd Table 点击行变换背景颜色 (Antd React)相关推荐

最新文章

热门文章