ice-design table表格点击行选中，给定选中样式

最新推荐文章于 2024-07-23 14:53:44 发布
最新推荐文章于 2024-07-23 14:53:44 发布
阅读量837 收藏 1
点赞数 1
分类专栏： 个人总结 文章标签： ice-design table表格行选中样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Chris__wang/article/details/82740462
版权

话不多说，先上效果图

需求：点击选中，选中行显示蓝色，点击第一行后第一行变蓝色

由于react中直接操作dom节点比较麻烦，所以我首先查找的是ice-design的api文档

找到了getRowClassName这个方法，具体用法这上面说没有细说，只能自己尝试

下图是调用table组件部分

当点击行一行的时候，获取当前行的索引和数据，将索引值（当然也可以用id）更新到state里面，此时getRowClassName就会被再次调用，然后进行判断如果选中的clickIndex等于表格中某一个index，就会返回class类样式。

在样式文件中设置样式

【右上角点个赞，谢谢】

Chris__Wang
关注
专栏目录
react+antd中的tab页组件修改选中的tab样式
weixin_36706903的博客
09-11 6794
原图 效果图 思路：tab有增删，我这里是根据目录显示tab标签有选中同一个的，其实tab本身的切换也算选中同一个， 1、删除某个的时候，activeKey变得同时，样式也要跟着变，不管是有顺序的删除还是无序的删除 2、新增的时候，我这里的数据结构是都在最后一个加新数据，如果不是选中同一个，都是默认显示新增的数据的tab标签，也可以放最前面 3、我这里是根据组件的className来判断的，获取到所有的标签document.getElementsByClassName('ant-t
SIGMOD 2017论文的摘要与看法
chunjing6629的博客
06-23 3744
SIGMOD2017 持续更新 3.1 Concurrency并发 ACIDRain: Concurrency-Related Attacks on Database-Backed Web Applications ACIDRain：对数据库支持的Web应用程序的并发性攻击 Cicada: Dependably Fast Multi-Core In-Memory Transact...
一个巧妙的方法实现elementUI的table的行选中
weixin_34228617的博客
06-19 2702
　　问题背景：点击上面的框，选中下面对象的行数据 　　刚开始考虑使用的是table的事件：toggleRowSelection，但是发现一个奇怪的现象 <div v-if="orderData.length > 0"> <h5>审核意见：</h5> <div class="review bg_gray" v-for="(item
element table点击行实现选中和取消选中（可批量）
最新发布
weixin_45638884的博客
07-23 669
element table 实现点击行 选中 取消选中
EXCEL设置选中单元格样式
weixin_30608503的博客
01-26 316
你想这样啊，试试这段代码看行不：右键工作表名称--查看代码，在空白处粘贴就可以 Private Sub Worksheet_SelectionChange(ByVal Target As Range) Cells.Interior.ColorIndex = xlNone Target.Interior.ColorIndex = 8 End Sub 复...
vue elementui el-table表格 点击单元格添加选中样式
Z18834071903的博客
04-25 2161
vue elementui el-table表格 点击单元格添加选中样式
表格tr选中的样式变化和checkbox选中事件
海阔天空
04-22 1575
$(".list tr").slice(1).on("click mouseenter mouseleave", function (event) {         var $tr = $(this);         if (event.type === "mouseenter") {             if (!$tr.hasClass("selected")) {      
R学习笔记4
nide_wo的博客
09-29 2965
7 基本绘图 使用plot调整坐标向量 foo <- c(1.1,2,3.5,3.9,4.2) bar <- c(2,2.2,-1.3,0,0.2) plot(foo,bar) #plot简单二维作图plot（x，y） #x，y的位置不一定为向量，还可以为矩阵 > baz foo bar [1,] 1.1 2.0 [2,] 2.0 2.2 [3,] 3.5 -...
JavaEE知识体系
yuh2012的博客
07-11 2万+
1 1.文件上传下载 1.1 文件上传 1.1.1 文件上传的作用 例如网络硬盘！就是用来上传下载文件的。 在智联招聘上填写一个完整的简历还需要上传照片呢。 1.1.2 文件上传对页面的要求 1.必须使用表单，而不能是超链接； 2.表单的method必须是POST，而不能是GET； 3.表单的enctype必须是multipart/form-data； 4.在表单中添加file表
嵌入式方面名词术语总结
一路狂奔的测试生活
05-29 1345
AASIC（专用集成电路） Application-Specific Integrated Circuit. A piece of custom-designed hardware in a chip. 专用集成电路。一个在一个芯片上定制设计的硬件。  address bus （地址总线） A set of electrical lines connected to the processor a
2018ASC题目
Christian的博客
01-27 1万+
最近在做一些有关于2018届ASC的东西，考虑到所有的材料都为英文可能会造成一些困扰所以自己便翻译了这些，因为个人独自翻译所以可能会出现一些错误，如有还希望见谅并指出以便改正。 1、关于预赛       在预赛中，每个注册团队都需要提交一套文件，包括提案，优化源代码文件和输出文件（附录A中详细要求）。 提案需要用英文书写，并由ASC评估委员会审核。 2、提交指导
layui的表格table选中数据后更改本行的颜色
10-17
在layui的表格table中，选中某行数据之后更改本行颜色，取消选中后恢复原样式。在layui的表格table中，选中某行数据之后更改本行颜色，取消选中后恢复原样式。
vue3 笔记| el-table 控件 选中行高亮 设置选中行样式 获取选中行索引
weixin_47082655的博客
07-20 3557
el-table :row-class-name="tableRowClassName" 加上这句。
el-table的当前选中行样式和滑过行样式自定义
weixin_50072831的博客
08-15 2383
el-table的当前选中行样式和滑过行样式自定义
[HTML]table选中行效果
我是涛锅
05-04 1万+
比如是这样一个结构的table<table id="tUsers"> <thead> <tr> <td>序号</td> <td>帐号</td> <td>密码</td> </tr> </thead> <tbody> <tr> <td>1
如何实现table中，点击某行，选中某行，改变其背景色
热门推荐
u012431404的博客
08-19 2万+
1、首先，现在你的文件中导入 jquery.js 文件 2、在中添加如下代码 $("#table1 tr").click(function(){        document.getElementById("oddNum").value = this.id; //每行设置不同的id值，该行是获取当前行的唯一值         $(this).addClass("backcolor")
Vue Element-UI Table单击某个一行改变其背景颜色
weixin_45502613的博客
12-11 4595
1、先开启element的高亮选项 开启 highlight-current-row <el-table id="exprotTable" border stripe highlight-current-row v-loading="loading" ...
layui admin table单击行勾选checkbox并高亮显示
好巧的博客
01-17 4335
当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。最好不要设置背景色，有位小伙伴就是设置了td背景色为白色，如果本篇文章对你有帮助的话，很高兴能够帮助上你。01.这两个地方的筛选器名字要对应上。,td的白色背景色覆盖tr高亮的颜色。表格使用方法级和自动渲染都适用。点击全选之后，点击单行。
Ice-3.4.1分布式编程指南
"Ice英文文档，版本3.4.1，是分布式编程的指南，由多位作者共同贡献。文档中可能会提及制造商和销售商的产品标识，但并不意味着ZeroC认可这些商标。ZeroC对书中可能存在的错误或遗漏不承担责任，且不承担因使用书中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值