🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 行绑定鼠标右键 ## 7.1.3.行绑定鼠标右键 在table.render的done回调里面使用`tableX.bindCtxMenu`方法: ~~~ table.render({ elem: '#xTable3', cols: [[ {field: 'nickName', title: '用户名'}, {field: 'sex', title: '性别'} ]], done: function () { tableX.bindCtxMenu('xTable3', [{ icon: 'layui-icon layui-icon-edit', name: '修改此用户', click: function (d, tr) { layer.msg('点击了修改,userId:' + d.userId); } }, { icon: 'layui-icon layui-icon-close text-danger', name: '<span class="text-danger">删除此用户</span>', subs: [{ icon: 'layui-icon layui-icon-camera', name: '逻辑删除', click: function (d) { layer.msg('点击了逻辑删除,userId:' + d.userId); } }, { icon: 'layui-icon layui-icon-picture-fine', name: '物理删除', click: function (d) { layer.msg('点击了物理删除,userId:' + d.userId); } }] }]); } }); ~~~ * 参数一   表格的id * 参数二   右键菜单 * icon     图标 * name   标题 * click     点击事件,d是当前行的数据 根据不同行动态显示不同菜单,只需要把参数二换成function并return菜单数组即可: ~~~ tableX.bindCtxMenu('xTable3', function(d, tr) { if(d.userId === 1) { return [{ icon: 'layui-icon layui-icon-close text-danger', name: '<span class="text-danger">删除此用户</span>', click: function (d, tr) { layer.msg('点击了删除,userId:' + d.userId); } }]; } else { return [{ icon: 'layui-icon layui-icon-edit', name: '修改此用户', click: function (d, tr) { layer.msg('点击了修改,userId:' + d.userId); } }]; } }); ~~~