效果：树Tree实现悬浮节点展示增删改的操作按钮（自定义树节点的展示）

 核心：使用titleRender

示例：

<Tree
    ...
    titleRender={(nodeData:any={}) => {
        return (
            <div className={`${roteCss.flexBetween} ${roteCss.treeTitle}`} style={{width: '200px'}}>
                <span>{nodeData[fieldNames.title]}</span>
                <Space size={4} className={roteCss.treeBtn}>
                    <PlusOutlined style={{color: '#1677ff'}}/>
                    <EditOutlined style={{color: '#1677ff'}}/>
                    <DeleteOutlined style={{color: '#ff4d4f'}}/>
                </Space>
            </div>
        )
    }}
/>

实现鼠标悬浮展示按钮元素原理：:hover结合display: none。默认为display: none，:hover时修改display的值即可。

.treeTitle {
    .treeBtn {
        display: none;
    }
}
.treeTitle:hover {
    .treeBtn {
        display: flex;
    }
}

完整示例：

import React, { useRef, useState, useEffect, useImperativeHandle, } from 'react';
import { DownOutlined, EditOutlined, DeleteOutlined, PlusOutlined, } from '@ant-design/icons';
import { Tree, Typography, Button, Space, Popconfirm, message, } from 'antd';
import type { DataNode, TreeProps } from 'antd/es/tree';

import '../index.less'

const treeData:any = [
    {
        "id": 2,
        "name": "水果",
        "parentId": 0,
        "children": [
            { "id": 17, "name": "苹果", "parentId": 2 },
            { "id": 19, "name": "李子", "parentId": 2 },
            { "id": 20, "name": "草莓", "parentId": 2 },
            { "id": 21, "name": "柿子", "parentId": 2 },
        ]
    },
    {
        "id": 13,
        "name": "电器",
        "parentId": 0,
        "children": [
            { "id": 14, "name": "手机", "parentId": 13 },
            { "id": 15, "name": "电脑", "parentId": 13 }
        ]
    }
]
const fieldNames:any = {
    title: 'name', key: 'id', children: 'children'
}
const DepartTree: React.FC = (props:any,ref:any) => {
    const onSelect: TreeProps['onSelect'] = (selectedKeys:any=[], info) => {
    };

    return (
        <Tree
            showLine
            defaultExpandAll={true}
            defaultExpandParent={true}
            switcherIcon={<DownOutlined />}
            onSelect={onSelect}
            treeData={treeData}
            fieldNames={fieldNames}
            titleRender={(nodeData:any={}) => {
                return (
                    <div style={{width: '200px'}} className='treeTitle'>
                        <span>{nodeData[fieldNames.title]}</span>
                        <Space size={4} className='treeBtn'>
                            <EditOutlined style={{color: 'blue'}}/>
                            <DeleteOutlined style={{color: 'red'}}/>
                            <PlusOutlined style={{color: 'green'}}/>
                        </Space>
                    </div>
                )
            }}
        />
    );
};

export default DepartTree;

 index.less

.treeTitle {
    display: flex;
    .treeBtn {
        display: none;
    }
}
.treeTitle:hover {
    .treeBtn {
        display: flex;
    }
}