扫一扫下方二维码,关注本站官方公众号
获取永久解锁本站全部文章的验证码
还能不定期领现金红包

react antd的Table组件实现鼠标移入某一行显示该行操作-Go语言中文社区

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

实现效果
在这里插入图片描述

版权声明1:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/csdn_cjgu/article/details/108879302
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2021-05-16 09:11
  • 阅读 ( 477 )

0 条评论

请先 登录 后评论

官方社群