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