ant-design-table 合并单元格后的行背景色及鼠标移入移出颜色

ant-design-table 合并单元格后的行背景色及鼠标移入移出颜色

想要实现的效果:

1、合并后的行数据统一背景色,如图1所示;
2、鼠标移入:合并后的行数据在鼠标移入统一背景色,如图2所示;
3、鼠标移出:合并后的行数据在鼠标移出统一背景色,如图1所示;

效果图1 第一行第二行合并后的背景色一致

效果图2 鼠标移入的背景色

1、合并数据统一背景色实现的思路:

1、合并数据统一背景色:( oddEven:0:奇数,1:偶数 ),假如是按照code合并的 , 拿到表格数据,第一条数据插入一个字段oddEven = ‘0’,然后根据要合并的code判断:

  • i 行code 与 i+1 行code相等 且 i 行oddEven = ‘ 0 ’,那 i 行 和 i+1 行 的 oddEven = ‘ 0 ’,

  • i 行code 与 i+1 行code相等 且 i 行oddEven = ‘ 1 ’,那 i 行 和 i+1 行 的 oddEven = ‘ 1 ’,

  • i 行code 与 i+1 行code不等 且 i 行oddEven = ‘ 0 ’,那 i+1 行 的 oddEven = ‘ 1 ’,

  • i 行code 与 i+1 行code不等 且 i 行oddEven = ‘ 1 ’,那 i+1 行 的 oddEven = ‘ 0 ’,

    可以将oddEven 按照上面那种方式插入每条表格数据

2、鼠标移入移出的思想:

  • 鼠标移入行:根据传值过来的record,拿到表格中跟record.code相同的数据,然后在dom中相应的tr添加类名;
  • 鼠标移出行:根据传值过来的record,拿到表格中跟record.code相同的数据,然后在dom中相应的tr删除类名;
    -主要代码如下:
		//针对于合并单元格之后的鼠标移入事件
		onMouseEnter = (e,record)=>{
		const {nurseStation:{vaccHistoryDataNo}} = this.props;
		if(!(vaccHistoryDataNo?.data)) return;
		const keyArr = [];
		vaccHistoryDataNo?.data.forEach(item=>{
		  if(record.vaccineMajorCode === item.vaccineMajorCode){
		    keyArr.push(item.vaccinationRecordId);
		  }
		})
		const classArr =  document.getElementsByClassName('ant-table-row');
		const rArr = [...classArr]
		const arr = [...new Set([...new Set(rArr)].filter(x => new Set(keyArr).has(x.dataset.rowKey)))];
		arr.map(item=>item.className.indexOf('hoverClassName') == '-1' ?  item.className += ' hoverClassName' : item.className += '')
		}
		onMouseLeave = (e,record)=>{
		  const {nurseStation:{vaccHistoryDataNo}} = this.props;
		  if(!(vaccHistoryDataNo?.data)) return;
		  const classArr =  document.getElementsByClassName('ant-table-row');
		  const rArr = [...classArr];
		  rArr.map(item=>this.removeClass(item,'hoverClassName'))
		}
		
		 removeClass = (obj,classname) =>{
		  //如果原来有class
		  if(obj.className!==""){
		      const arrClassName = obj.className.split(" ");
		      const index = this.arrIndexOf(arrClassName,classname);
		      //如果有需要移除的class
		      if(index!==-1){
		          arrClassName.splice(index,1);  //删除存在的class值
		          obj.className=arrClassName.join(" ");   //将数组以空格连接成字符串放到元素的class属性里
		      }
		  }
		}
          <StandardTable
                    rowKey="vaccinationRecordId"
                    className={styles.antTable}
                    columns={columns}
                    data={vaccHistoryDataNo}
                    rowClassName={record => (record.oddEven === '1' ? styles.backgroundTypesA : styles.backgroundTypes)}
                    onRow={record => ({
                        onMouseEnter: (e)=> this.onMouseEnter(e,record), // 鼠标移入行
                        onMouseLeave: (e)=> this.onMouseLeave(e,record),//鼠标移出行
                      })}
                    loading={loading}
                    pagination={false}
            />
		   arrIndexOf=(arr,v)=>{
		    for(let i=0;i<arr.length;i+=1){
		        if(arr[i]===v){
		            return i;
		        }
		    }
		    return -1;
		  }

3、样式

		.backgroundTypesA{
		  background:white !important;
		}
		
		.backgroundTypes{
		  background: #f9f9f9 !important;
		}
  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值