vxe-table 右键菜单设置

原创已于 2023-04-27 09:59:37 修改 · 2.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #vue.js #anti-design-vue #前端框架

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

AntDesignVue 和 vxe-table 专栏收录该内容

6 篇文章

订阅专栏

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

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: '新增' },
                                { code: 'handleDelete', name: '删除' }, 
                            ]
                        ]
                    },
                    visibleMethod: this.visibleMethod
                }, 
               columns: [
                   {field: 'top_xh', title: '序号',align: 'center', dataIndex: 'top_xh'},
                   {field: 'work_content', title: '内容', width: '130px', editRender: {},  dataIndex: 'work_content'},
                   {field: 'complete_form', title: '形式', width: '130px', editRender: {}, dataIndex: 'complete_form'},
                   {field: 'plan_complete_date', title: '节点', editRender: {}, dataIndex: 'plan_complete_date'},
                   {field: 'person_in_charge',title: '日期',editRender: {},  dataIndex: 'person_in_charge'},
                   {field: 'complete_status',title: '是否完成',editRender: {},  dataIndex: 'complete_status'},
                   {field: 'remark',title: '备注', editRender: {}, slots: { edit: 'score_edit'}}, 
                   {field: 'action', title: '操作',  dataIndex: 'action',  align: "center", scopedSlots: {customRender: 'action'}}
               ], 
               columnsList: [], 
               data:[],
               dataSource: [],
           },
       }
   },

3、执行的事件模块部分

//点击右键时执行的事件
visibleMethod(){},
//菜单点击
menuClick(options) {
    if(options.menu.code == 'addRowOne') {
        this.addRowOne(options.row, options.column)
    }  
    if(options.menu.code == 'handleDelete') {
       this.handleDelete(options.row,  options.rowIndex, options.column)
    }  
 },
//新增事件
addRowOne(row, column){
    let one_row = {}
    this.table.dataSource.push(one_row)
},
//删除事件
handleDelete(row, rowIndex, column){
    let dataS = JSON.parse(JSON.stringify(this.table.dataSource)) 
    delete dataS[rowIndex] 
    this.table.dataSource = dataS
},

以上内容仅供参考！