layui 表格内嵌套input输入框

在Layui表格中嵌套input输入框，可以通过自定义列模板实现。

下面是一个示例代码：

<table class="layui-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>名称</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>名称1</td>
      <td>
        <input type="text" class="layui-input" placeholder="请输入内容">
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>名称2</td>
      <td>
        <input type="text" class="layui-input" placeholder="请输入内容">
      </td>
    </tr>
  </tbody>
</table>

在上面的代码中，我们在表格中的操作列中嵌套了一个input输入框，通过设置class为layui-input，可以使用Layui的样式。

如果需要动态添加行，可以通过Layui的table.render()方法进行渲染，示例代码如下：

var data = [{
  id: 1,
  name: '名称1'
}, {
  id: 2,
  name: '名称2'
}];

table.render({
  elem: '#demo',
  cols: [[
    {field: 'id', title: 'ID'},
    {field: 'name', title: '名称'},
    {field: 'operation', title: '操作', templet: '#operationTpl'}
  ]],
  data: data
});

// 自定义列模板
<script type="text/html" id="operationTpl">
  <input type="text" class="layui-input" placeholder="请输入内容">
</script>

在上面的代码中，我们使用了自定义列模板，将input输入框嵌套在了操作列中。然后使用table.render()方法进行渲染，其中的operation列设置了templet属性，值为自定义模板的id。这样就可以动态添加行，并且在操作列中嵌套input输入框了。