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

话不多说,先上效果图

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

需求:点击选中,选中行显示蓝色,点击第一行后第一行变蓝色

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

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

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

下图是调用table组件部分

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

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

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

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

在样式文件中设置样式