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