Commit 94406b3f authored by zhangwenshuai's avatar zhangwenshuai

增加行hover效果

parent 52c7858a
...@@ -5,6 +5,7 @@ import _ from 'lodash'; ...@@ -5,6 +5,7 @@ import _ from 'lodash';
import { config } from './base/config'; import { config } from './base/config';
import { getEditComponent, getFormat, setFormat } from './base'; import { getEditComponent, getFormat, setFormat } from './base';
import s from './Cell.less'; import s from './Cell.less';
import tableStyle from './Table.less';
import { CellProps, CellDataProps } from './interface'; import { CellProps, CellDataProps } from './interface';
import FormHelper from '../utils/formHelper'; import FormHelper from '../utils/formHelper';
import firstIcon from '../assets/first.png'; import firstIcon from '../assets/first.png';
...@@ -103,6 +104,20 @@ const Cell = (props: CellProps) => { ...@@ -103,6 +104,20 @@ const Cell = (props: CellProps) => {
} }
setStatus('detail'); setStatus('detail');
}; };
// 添加行hover样式
const onMouseEnter = () => {
const doms = document.querySelectorAll(`.row_${rowIndex}`);
doms.forEach((dom) => {
dom.classList.add(tableStyle.hover);
});
};
// 去除行hover样式
const onMouseLeave = () => {
const doms = document.querySelectorAll(`.row_${rowIndex}`);
doms.forEach((dom) => {
dom.classList.remove(tableStyle.hover);
});
};
const selfRenderDetailCell = () => { const selfRenderDetailCell = () => {
let empty = let empty =
...@@ -169,6 +184,8 @@ const Cell = (props: CellProps) => { ...@@ -169,6 +184,8 @@ const Cell = (props: CellProps) => {
const detail = ( const detail = (
<div <div
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
className={ className={
selectedCell === `${position}_${cellKey}` ? classNames(s.detailCell, s.selected) : s.detailCell selectedCell === `${position}_${cellKey}` ? classNames(s.detailCell, s.selected) : s.detailCell
} }
......
...@@ -69,7 +69,9 @@ ...@@ -69,7 +69,9 @@
color: @textGeneralColor; color: @textGeneralColor;
font-weight: @weightRegular; font-weight: @weightRegular;
} }
.hover {
background: @tableHoverBgColor;
}
.headerGrid { .headerGrid {
width: 100%; width: 100%;
overflow: hidden !important; overflow: hidden !important;
......
...@@ -393,7 +393,7 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -393,7 +393,7 @@ export default class AirTable extends Component<TableProps, TableState> {
columnData={columnData} columnData={columnData}
record={record} record={record}
emitChangeCell={emitChangeCell} emitChangeCell={emitChangeCell}
cellClassName={classNames(rowClassNameStr, cellClassNameStr)} cellClassName={classNames(`row_${rowIndex}`, rowClassNameStr, cellClassNameStr)}
cellStyle={{ ...rowStyleObj, ...cellStyleObj }} cellStyle={{ ...rowStyleObj, ...cellStyleObj }}
columns={columns} columns={columns}
paginationConfig={paginationConfig} paginationConfig={paginationConfig}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment