安裝教程

layui.config({
    base: '/js/', //拓展模塊的根目錄
})
.extend({
    dropMenu: '/dropMenu/dropMenu'
});

使用說明

<input type='button' class='layui-btn rowmoreBtn layui-icon layui-icon-more' value="更多"/>

layui.dropMenu.render({
        type:0, //默認0，單擊和鼠標經(jīng)過時都生效，1點擊時，2鼠標經(jīng)過時（非必填）
	ele:".rowmoreBtn", //$(".rowmoreBtn")
	width:"120px", //菜單寬度（非必填）
        css:{"background":"red"}, //菜單樣式（非必填）
        location:"c", //下拉菜單依靠位置，c居中、l左、r右（非必填）
        align: "c", //菜單內(nèi)容文本對齊方式，c居中、l左、r右（非必填）
         //菜單數(shù)據(jù)，isShow是否顯示，可配合權限來顯示
	data:[
		{title:'選項1', icon:'layui-icon-set', event:'more1', isShow:true},
		{title:'選項2', icon:'layui-icon-notice', event:'more2'},
		{title:'選項3', icon:'layui-icon-search', event:'more3'},
		{title:'選項1', icon:'layui-icon-friends', event:'more1'},
		{title:'選項2', icon:'layui-icon-console', event:'more2'},
		{title:'選項3', icon:'layui-icon-app', event:'more3'},
		{title:'選項1', icon:'layui-icon-home', event:'more1'},
		{title:'選項2', event:'more2'},
		{title:'選項3', icon:'layui-icon-face-smile', event:'more3', isShow:false}
	],
        //觸發(fā)的事件（非必填）
	event:{
		more1: function(){
		  alert('觸發(fā)了事件1');
		},
		more2: function(){
		  alert('觸發(fā)了事件2');
		},
		more3: function(){
		  alert('觸發(fā)了事件3');
		}
	},
    done:function(dropM){ } //菜單渲染完成后觸發(fā)事件，dropM下拉菜單對象
});

//事件可以單獨用util.event來處理
  layui.util.event('lay-event', {
    more1: function(){
      alert('觸發(fā)了事件1');
    },
    more2: function(){
      alert('觸發(fā)了事件2');
    },
    more3: function(){
      alert('觸發(fā)了事件3');
    }
  });

//事件可以使用table.on('tool')工具條事件來處理
   layui.table.on(`tool(mytable)`, function(obj){ 
        var layEvent= obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 參數(shù)對應的值）
        var row = obj.data; //獲得當前行數(shù)據(jù)
        var tr = obj.tr; //獲得當前行 tr 的 DOM 對象（如果有的話）
        if(layEvent === 'more1'){
            alert('觸發(fā)了事件1');
        } 
        else if(layEvent === 'more2'){
            alert('觸發(fā)了事件2');
        }
   });

//跟layui.table結合，用lay-events標簽動態(tài)顯示菜單內(nèi)容
 <!-- 行操作欄 -->
 <script type="text/html" id="rowtool">
    <div class='layui-inline'>
      <input type='button' class='layui-btn' value="編輯" lay-event="edit"/>
    </div>
    {{#  if(d.is_canDel){ }}
        <input type='button' class='layui-btn layui-btn-xs layui-btn-primary rowmoreBtn' value='更多' lay-events="viewinfo,delete"/>
    {{#  } else { }}
        <input type='button' class='layui-btn layui-btn-xs layui-btn-primary rowmoreBtn' value='更多' lay-events="neworder,recycle"/>
    {{#  } }}
 </script>

layui.table.render({
    elem: '#demo',
    url: '/demo/table/user/',
    page: true,
    cols: [[        
        { field: 'button', title: '操作', align:'center', width: "110", fixed: true, toolbar: '#rowtool' },
        { field: 'id', title: 'ID', align: 'center', width: 120},
        { field: 'name', title: '名稱', align: 'center', width: 180 },
    ]],
    done(){
        layui.dropMenu.render({
             ele:".rowmoreBtn",
             data:[
		     {title:'查看', icon:'layui-icon-set', event:'viewinfo'},
		     {title:'刪除', icon:'layui-icon-delete', event:'delete'},
                     {title:'新建訂單', icon:'layui-icon-add-circle', event:'neworder'},
                     {title:'放入回收站', icon:'layui-icon-cart', event:'recycle'},
             ]
        });
    }
});

效果圖