前端项目实战伍-ant design table行实现逐行变色的效果

大家好 我是歌谣 记录工作中遇到的各种问题 微信公众号关注前端小歌谣持续学习前端知识

今天在工作中遇到一个新的需求 就是实现一个逐行变色的效果

思路找到每一行 点击判断是该行

render部分

render: (value: any, record: any, index: any) => {

               // 处理列，相同数据则合并

               // 处理rowSpan

               return <div className=

{record.id==styleFlagId?"style-color":""}

onClick={()=>{handleClick(record.id)}}>{value}</div>

           },

数据部分

const [styleFlagId, setstyleFlagId] = useState<any>("");

   const handleClick=(styleFlagId:any)=>{

       setstyleFlagId(styleFlagId)

   }

运行结果