antd table 取消hover、选中高亮、隔行变色

antd table 背景色、hover效果啥的基本上都是作用在td上，直接写在tr上，会有很多未知效果
思路大概都是这样，具体的还是要自己修改

取消hover效果

参考博客
直接照搬过来了，修改一下应该能用

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: () => {
              // 设置选中的index
              setSelectIndex(index + 1)
           },
      };
    }}
/>

隔行变色

样式(less)

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

js

  // 区分表格奇偶行
  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: () => {
              // 设置选中的index
              setSelectIndex(index + (current - 1) * pageSize + 1);
           },
      };
    }}
/>

2022-03-02