react antd的Table组件实现鼠标移入某一行显示该行操作

---

一、实现思路

实现思路（基于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);

三、效果