一、实现思路

实现思路(基于react hook 实现):定义一个state 值,记录当前鼠标移入行的索引,操作列使用 colume 的 render 属性自定义渲染内容,但是要给列宽,否则内容的显示隐藏会导致表格抖动,渲染内容通过对比本行索引(index)与 state 记录的索引,动态设置内容className,通过Table 的 onRow 属性,通过回调方法得到当前鼠标移入行的索引,并更新state。

二、代码

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);

三、效果


https://blog.csdn.net/csdn_cjgu/article/details/108879302

您已经阅读00:00:00欢迎留言评论,喜欢的话就为作者点个赞或者赏颗糖吧! 分享