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;
		}