antd table 背景色、hover效果啥的基本上都是作用在td上，直接寫在tr上，會有很多未知效果
思路大概都是這樣，具體的還是要自己修改

取消hover效果

參考博客
直接照搬過來了，修改一下應(yīng)該能用

table:hover,
tr:hover,
thead:hover {
    background: #20293c !important;
}

.ant-table-tbody > tr.ant-table-row:hover > td {
    background: none !important;
}

選中行高亮

樣式(less)

  .selectedRow {
    & > td {
      // background: rgba(47, 122, 213, 0.2);
      background-color: #d7e4f7;
    }
  }
  .ant-table-tbody > .selectedRow > .ant-table-cell-row-hover {
    background-color: #d7e4f7;
  }

js

  const getRowClassName = (record, index) => {
    let className = '';
    let indexNum = index + 1;
// 當選中的id等于該行的id時，className=‘selectedRow’
    className =
      indexNum === selectIndex
        ? 'selectedRow' : '';
    return className;
  };

  <Table
     className="no-hover"
     bordered
     columns={tableColumns}
     dataSource={tableList}
     rowKey={(row) => (row.id)}
     loading={loading}
     rowClassName={getRowClassName}
     pagination={false}
     onRow={(record, index) => {
     return {
          onClick: () => {
              // 設(shè)置選中的index
              setSelectIndex(index + 1)
           },
      };
    }}
/>

隔行變色

樣式(less)

.oddRow {
    & > td {
      background-color: #fff;
    }
  }
  .evenRow {
    & > td {
      background-color: #f8f9fa;
    }
  }

js

  // 區(qū)分表格奇偶行
  const getRowClassName = (record, index) => {
    let className = '';
    className = index % 2 === 0 ? 'oddRow' : 'evenRow';
    return className;
  };

  <Table
     className="no-hover"
     bordered
     columns={tableColumns}
     dataSource={tableList}
     rowKey={(row) => (row.id)}
     loading={loading}
     rowClassName={getRowClassName}
     pagination={false}
/>

隔行變色 + 選中高亮

樣式(less)

  .oddRow {
    & > td {
      background-color: #fff;
    }
  }
  .evenRow {
    & > td {
      background-color: #f8f9fa;
    }
  }
  .selectedRow {
    & > td {
      background-color: #d7e4f7;
    }
  }
  .ant-table-tbody > .selectedRow > .ant-table-cell-row-hover {
    background-color: #d7e4f7;
  }

js

const getRowClassName = (record, index) => {
    let className = '';
// 存在分頁時
    let indexNum = index + (current - 1) * pageSize + 1;
    className =
      indexNum === selectIndex
        ? 'selectRow'
        : index % 2 === 0
        ? 'oddRow'
        : 'evenRow';
    return className;
  };

  <Table
     className="no-hover"
     bordered
     columns={tableColumns}
     dataSource={tableList}
     rowKey={(row) => (row.id)}
     loading={loading}
     rowClassName={getRowClassName}
     pagination={false}
     onRow={(record, index) => {
     return {
          onClick: () => {
              // 設(shè)置選中的index
              setSelectIndex(index + (current - 1) * pageSize + 1);
           },
      };
    }}
/>

2022-03-02