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

最新推荐文章于 2023-08-31 10:48:59 发布

原创最新推荐文章于 2023-08-31 10:48:59 发布 · 5.7k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#react

react 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用React Hook实现Ant Design的Table组件，在鼠标移入某一行时显示该行的操作。关键在于定义state记录索引，通过onRow属性更新state，并在列的render属性中自定义渲染内容，避免表格抖动。

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

实现效果