layui/docs/dropdown/examples/table.md

<table class="layui-hide" id="ID-dropdown-demo-table"></table>

<script type="text/html" id="ID-dropdown-demo-table-tool">
  <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
</script>

<script>
layui.use(function(){
  var table = layui.table;
  var dropdown = layui.dropdown;
  
  // dropdown 在表格中的应用
  table.render({
    elem: '#ID-dropdown-demo-table',
    url: '{{d.root}}/static/json/table/demo5.json',
    title: '用户数据表',
    cols: [[
      {type: 'checkbox', fixed: 'left'},
      {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true},
      {field:'username', title:'用户名', width:120, edit: 'text'},
      {field:'email', title:'邮箱', minWidth:150},
      {fixed: 'right', title:'操作', toolbar: '#ID-dropdown-demo-table-tool', width:150}
    ]],
    limits: [3],
    page: true
  });

  // 行工具事件
  table.on('tool(ID-dropdown-demo-table)', function(obj){
    var that = this;
    var data = obj.data;
      
    if(obj.event === 'edit'){
      layer.prompt({
        formType: 2,
        value: data.email
      }, function(value, index){
        obj.update({
          email: value
        });
        layer.close(index);
      });
    } else if(obj.event === 'more'){
      // 更多下拉菜单
      dropdown.render({
        elem: that,
        show: true, // 外部事件触发即显示
        data: [{
          title: 'item 1',
          id: 'aaa'
        }, {
          title: 'item 2',
          id: 'bbb'
        }, {
          title: '删除',
          id: 'del'
        }],
        click: function(data, othis){
          //根据 id 做出不同操作
          if(data.id === 'del'){
            layer.confirm('真的删除行么', function(index){
              obj.del();
              layer.close(index);
            });
          } else {
            layer.msg('得到表格下拉菜单 id：'+ data.id);
          }
        },
        align: 'right', // 右对齐弹出
        style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
      }) 
    }
  });
});
</script>