Antd 表格样式修改

写一下最近使用Antd表格遇到的问题,如果遇到以下问题可以参考  (antd版本为3.16.3)

•  修改表头、列表文字和背景颜色
• 去掉（修改）鼠标移到某行时的背景
• 修改选中某行时的文字颜色
• 设置奇偶行不同背景

       看下table的标签，不同配置下有所不同但是主要标签都是相同的，像ant-table-thead代表表头ant-table-tbody代表列表内容。

       我在覆盖antd样式时一般通过外联CSS修改，这样有时碰见因为外联样式优先级较低无法覆盖antd样式的情况，使用!important提高优先级解决。

       十分建议覆盖antd样式前先限制样式作用范围，避免修改其他antd组件样式

 修改表头、列表文字和背景颜色

          //修改表头文字、背景颜色  
          .ant-table-thead > tr >th{
            color: white;
            background: #3071b9 !important;
          }

          //修改列表文字、背景颜色  
          .ant-table-tbody > tr >th{
            color: white;
            background: #3071b9 !important;
          }

 

 去掉（修改）鼠标移到某行时的背景

          //在鼠标悬浮时背景色展示在当前项非当前行
          .ant-table-tbody > tr > td {
            background: rgba(255,255,255,0) !important;
          }
          .ant-table-tbody > tr >td:hover{
            background: rgb(255,255,255) !important;
          }
          //去除鼠标悬浮的背景色  
          .ant-table-tbody > tr > td {
            background: rgba(255,255,255,0) !important;
          }
          .ant-table-tbody > tr >td:hover{
            background: rgba(255,255,255,0) !important;
          }

 

 修改选中某行时的文字颜色

onRow是table提供的属性，不知道的小伙伴可以去看下官方文档哦

onRow={(record, index) => {
    return {
        onClick: (e) => {
            let tr = e.target.parentNode; //拿到tr标签
            if (tr.nodeName !== 'TR') {
                tr = tr.parentNode
            }
            //给所有tr标签设置颜色
            for (let i = 0; i < tr.parentNode.childNodes.length; i++) {
                tr.parentNode.childNodes[i].style.color = 'white'
            }
            //单独设置被选中的标签颜色
            tr.style.color = "rgb(115,201,236)";
        },
    };
}}

     if (tr.nodeName !== 'TR') {
                tr = tr.parentNode
      }

这个判断是因为在你设置表格中的元素不是文本而是你添加的标签的时候，你使用e.target.parentNode拿到的是你添加的标签，所以这里做了这样的判断。当然你表格中单纯是文本不需要添加这段代码。

 

 设置奇偶行不同背景

rowClassName 也是table提供的属性，这里通过检查当前行是奇数还是偶数分别使用不同的类型，在对不同类名使用不同的背景色。

rowClassName = {(record, index) => {
    let className = index % 2 ? 'shallow_gray': 'deep_gray';
    return className
}}