layui 动态添加行 下拉菜单

你可以使用layui的table模块的on()方法来监听表格行的添加，然后在回调函数中动态添加下拉菜单。

以下是一个示例代码：

HTML：

<table class="layui-table" id="demo">
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10001</td>
      <td>小明</td>
      <td><a href="javascript:;" class="add-dropdown">添加下拉菜单</a></td>
    </tr>
    <tr>
      <td>10002</td>
      <td>小红</td>
      <td><a href="javascript:;" class="add-dropdown">添加下拉菜单</a></td>
    </tr>
  </tbody>
</table>

JavaScript：

layui.use(['table', 'layer'], function(){
  var table = layui.table;
  var layer = layui.layer;
  
  // 监听表格行的添加
  table.on('tool(demo)', function(obj){
    if(obj.event === 'add'){
      var trElem = obj.tr; // 获取当前行的DOM对象
      var dropdownElem = $('<div class="layui-table-cell"></div>'); // 创建下拉菜单的DOM对象
      var selectElem = $('<select><option value="">请选择</option><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select>'); // 创建下拉菜单中的选项
      dropdownElem.append(selectElem); // 将选项添加到下拉菜单中
      $(trElem).find('.add-dropdown').parent().after(dropdownElem); // 将下拉菜单添加到当前行中
    }
  });
});

在上面的示例代码中，我们使用了jQuery来创建和操作DOM对象。首先，我们在每个操作列中添加了一个class为`add-dropdown`的超链接，当用户点击这个超链接时，会触发表格行的添加事件。在事件的回调函数中，我们首先获取当前行的DOM对象，然后创建一个class为`layui-table-cell`的DIV元素作为下拉菜单的容器，再在容器中创建一个select元素作为下拉菜单中的选项。最后，我们将下拉菜单添加到当前行的超链接后面。