(资料图片仅供参考)

为了减少表格列的长度，想着把行操作都放到鼠标右键菜单去。可惜Layui的表格目前还不支持右键菜单事件，只能自己去实现了。

监听行的contextmenu

可以在表格数据渲染完毕的回调里，利用下拉菜单组件dropdown监听行tr的contextmenu事件。

layui.table.render({  // 省略其它配置....  // 表格数据渲染完毕的回调  done (response, curr, count) {    // table实例    let that = this;    // 下拉菜单组件    layui.dropdown.render({      // 监听行`tr`的事件      elem: `.layui-table-view[lay-id="${that.id}"] .layui-table-body tr`      // 监听`contextmenu`事件      ,trigger: "contextmenu"      // 菜单列表      ,data: [        {title: "操作1", id: "event1"},        {title: "操作2", id: "event2"}      ],      click(data, othis) {        // 获取表格当前行数据        let trData = table.cache[that.id][this.elem.data("index")];        switch(data.id) {          case "event1":            layer.alert("操作1");            break;          case "event2":            layer.alert("操作2");            break;        }      }    });  }});