解决layui数据表格中嵌套下拉框显示问题

在layui数据表格中嵌套下拉框时,下拉框不能正常弹出,仔细观察发现,点击下拉框时会有一个短暂的弹出动画,马上又消失了,遂猜想,大概是显示的问题,可能是被覆盖了,那么解决覆盖就可以了。

如图,

解决layui数据表格中嵌套下拉框显示问题_第1张图片

下拉框已经弹出,只是没有正常显示 

解决方法非常简单,只需在table渲染方法中添加如下代码即可,

done: function (res, curr, count) {
                $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible');
            }

table渲染代码

table.render({ //其它参数在此省略
  height: 'full-50',
  done: function (res, curr, count) {
     $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow','visible');
  }
}); 

因为layui的样式冲突导致表格显示在下拉框的上方,所以你需要(为select标签)设置样式使得select标签显示在上层。

附:

thead中的填写

tbody的tr内容,是一个完整的下拉框

解决layui数据表格中嵌套下拉框显示问题_第2张图片

你可能感兴趣的:(前端,layui,数据表格,前端)