vxe-table 右键菜单设置

onlylele

已于 2023-04-27 09:59:37 修改

阅读量1.6k

点赞数

分类专栏： AntDesignVue 和 vxe-table 文章标签： javascript 前端 vue.js anti-design-vue 前端框架

于 2023-04-24 17:21:50 首次发布

本文链接：https://blog.csdn.net/onlylele/article/details/130347246

版权

这篇博客介绍了如何在vxe-table中设置右键菜单功能。通过vue代码示例展示了点击右键后显示菜单项，并能响应选择，同时提到了表内容的默认数据设置和事件处理模块。

摘要由CSDN通过智能技术生成

1、vxe-table中点击右键出现右键菜单项，可以选择右键菜单中的内容； vue 部分代码

<！--- 
-----注：关键点： 
------右键菜单项:menu-config="table.rightMenu" 
------点击右键中的菜单事件 @menu-click="menuClick" 
---> 
<vxe-table
     border
     ref="xTable"
     class="moz-style" 
     :menu-config="table.rightMenu"
     resizable 
     :columns="table.columns" 
     :data="table.dataSource" 
     @menu-click="menuClick" 
 > 
</vxe-table>

2、表内容默认数据设置部分；

/** ...其他内容略过... **/
data(){
       return { 
            table: {
               loading: true, 
               rightMenu: {
                    className: 'my-menus',
                    body: {
                        options: [
                            [
                                { code: 'addRowOne', name