社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
别墨迹,快上代码吧
import React, { memo, useCallback, useState } from 'react';
import { Table } from 'antd';
const dataSource = [
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
];
const TestTableOnShow = () => {
const [rowActiveIndex, setRowActiveIndex] = useState(null);
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '',
render: (text, record, index) => {
return <div className={index !== rowActiveIndex ? 'hide' : ''} style={{ cursor: 'pointer' }}>显示</div>;
},
width: 80,
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
},
];
const onTableRow = useCallback((row, index) => {
return {
onMouseEnter: () => {
setRowActiveIndex(index);
},
onMouseLeave: () => {
setRowActiveIndex(null);
},
};
}, []);
return (
<Table
dataSource={dataSource}
columns={columns}
onRow={onTableRow}
/>
);
};
export default memo(TestTableOnShow);
实现效果
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!