问题说明

• 众所周知，由于 table 组件的单元格默认是单行模式，且会对元素溢出隐藏，所以当我们使用 select 时，会出现下拉被遮挡的问题。虽然从 v2.7.0 开始，这一问题可以很好地解决，但还是少有人知道如何使用。
• 再者，对于 table 的编辑功能，大家普遍只停留在 edit 属性上，并没有充分利用 templet 属性的灵活性实现多样化编辑，所以有必要进行这方面的分享，以供大家参考。

解决方案

• 前置条件： 通过 css 属性取消默认的溢出隐藏，并设置适当高度。

table.render({
  elem: '#id',
  css: '.layui-table-cell{height: 50px; line-height: 40px; overflow: visible;}'
});

• 方式一： 上述 css 属性设定后，layui select 下拉时即不会被遮挡。但由于 select 组件的定位是相对于父元素，当 select 出现在 table 底部时，可能会撑起 table 的多余高度，因此该 select 方案请谨慎使用。
• 方式二： 将 select 设为原生模式，如：<select lay-ignore class="layui-border">…</select>
• 方式三： 使用 layui.dropdown 组件替代 select 组件（推荐该方案 ，详见下述演示）

其他组件（如 laydate、switch 等）的编辑方式跟 dropdown 同理

在线演示

• 效果预览： https://codepen.io/layui/full/bGvoXdP
• 示例源码： https://codepen.io/layui/pen/bGvoXdP
• 注意事项： 由于通过 css 属性取消了溢出隐藏，所以要控制好内容长度不要超出单元格宽高度。