adui
Version:
<div> <img src="https://wxa.wxs.qq.com/mpweb/delivery/legacy/wxadtouch/upload/t1/od834zef_52939fc6.png" style="margin:40px 0 0 -8px; background-color: #fcfcfc; box-shadow: none;" /> </div>
85 lines (81 loc) • 2.35 kB
Markdown
order: 2
title:
zh-CN: onRowEvents
en-US: onRowEvents
`onRowMouseEnter` `onRowMouseLeave` 实现鼠标上移触发变化：
```jsx
const [hoverIndex, setHoverIndex] = useState(null)
return (
<section>
<Table
columnsResizable={false}
dataSource={Array.from(new Array(2), (_, i) => ({ key: i }))}
getRowClassName={(_, rowIndex) =>
hoverIndex === rowIndex && "adui-componentDoc-table-row_hovered"
}
onRowMouseEnter={(_, rowIndex) => setHoverIndex(rowIndex)}
onRowMouseLeave={() => setHoverIndex(null)}
headerEmphasized
columns={[
{
dataIndex: "0",
title: "项目",
width: 300,
align: "center",
children: [
{
dataIndex: "asd1",
title: "项目asd1",
render: () => "项目一asd1",
width: 150,
onSort: () => {},
},
{
dataIndex: "asd2",
title: "项目asd2",
render: () => "项目一asd2",
width: 150,
onSort: () => {},
},
],
},
{
dataIndex: "1",
width: 120,
title: "投放时间",
render: (row, col, rowIndex) => (
<div className="adui-componentDoc-table-time1">
2017-08-18
<Icon icon="edit-outlined" interactive />
</div>
),
},
{
dataIndex: "2",
title: "数据项",
render: () => "92,435,344",
onSort: () => {},
popover: "asd",
},
{
dataIndex: "3",
title: "数据项",
render: () => <Popover popup="asdasd">阿斯顿阿斯顿</Popover>,
},
{ dataIndex: "4", title: "数据项", render: () => "3,635" },
]}
/>
<style
dangerouslySetInnerHTML={{
__html: `
.adui-componentDoc-table-row_hovered .adui-componentDoc-table-time1 svg { opacity: 1;visibility: visible; }
.adui-componentDoc-table-time1 { display: flex;align-items: center; }
.adui-componentDoc-table-time1 svg { margin-left: 12px; opacity: 0; visibility: hidden;transition: all var(--motion-duration-fast) var(--ease-in-out); }
`,
}}
/>
</section>
)
```