基于antd，实现Table支持右键弹出menu下载

最新推荐文章于 2025-01-23 10:19:36 发布

Five_D

最新推荐文章于 2025-01-23 10:19:36 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： antd 文章标签： javascript html5 html

本文链接：https://blog.youkuaiyun.com/Rabbit_yo/article/details/120702884

本文介绍如何在基于Ant Design的Table组件上实现右键菜单并添加下载功能。通过为组件添加唯一ID避免多实例冲突，阻止默认右键行为，动态创建并定位menu。注意使用事件监听器时的防重复绑定问题，以及在移除菜单前确认其存在和位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果

Table右键弹出menu支持下载

当前组件添加id，方式一页多个相同组件互相干扰

const tableId = useRef(Math.random()) ;
<Table
    id={
   tableId.current}
    dataSource={
   dataSource}
    columns={
   colums}
/>

获取组件，禁止鼠标右键默认事件，并增加menu

此处将 menu 挂在了最外层的组件 x-app 上，防止 menu 的位置偏差过大；
table 渲染完毕后再进行渲染menu，否则 menu 会无法获取；
使用绝对定位确定 menu 出现的位置

    useEffect(() => {
   
        if( tablemenu && tablemenu.isDownload ){
   
            const tableDIV = document.getElementById(tableId.current);
            if(tableDIV){
   

                tableDIV.oncontextmenu = function(e) {
   
                    // 阻止鼠标默认事件
                    e.preventDefault();
                }
                const xApp = document.getElementById('x-app');
                const rightMenu = document.createElement('button');

                tableDIV.onmouseup = function(e) {
   
                    e.stopPropagation()

                    if(e.button == 2){
   

                        mousexApp.oncontextmenu = function(e) {
   
                            // 阻止鼠标默认事件
                            e.

最低0.47元/天解锁文章