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

Bertha 。 2021-09-24 15:06 1156阅读 0赞

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

如图，

![20200825100928818.png][]

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

解决方法非常简单，只需在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中的填写

![20200825101945582.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70][]

[20200825100928818.png]: /images/20210923/e5bffe0b9ffc4d5283d72b660fcb4519.png
[20200825101945582.png]: /images/20210923/51643bcde1d447cb9f1e827df19e68f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70]: /images/20210923/30142840153b49abb69a92e9431fa947.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1156人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui 下拉框不显示解决方法

学layui时会遇到 layui的下拉框总是显示不出来 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0...

约定不等于承诺〃/ 2024年04月17日 14:37/ 0 赞/ 77 阅读

相关解决Layui动态生成select下拉选择框不显示问题

var str=' <option value="">请选择电压工程等级</option><option value="1">±800(660)kV及以上换流工程</o

梦里梦外;/ 2023年10月11日 12:19/ 0 赞/ 56 阅读

相关 layui中对select下拉框填充option数据；编辑修改时的数据回显问题；select下拉框数据联动问题

1.layui中对select下拉框填充option数据；编辑修改时的数据回显问题 callAPI('newDataGeneralProject.do?findPag

青旅半醒/ 2023年07月25日 08:58/ 0 赞/ 6 阅读

相关下拉框没有数据显示

![在这里插入图片描述][20191224110411338.png] ![在这里插入图片描述][20191224110522127.png] ![在这里插入图片描述]

今天药忘吃喽~/ 2023年06月25日 01:59/ 0 赞/ 15 阅读

相关 LayUI # 多选下拉框

我的项目中使用的是formSelects-v4.js，但是现在以及对此引用停止更新了。现在提供一下学习网址：[https://hnzzmsf.github.io/examp

迈不过友情╰/ 2023年06月24日 08:10/ 0 赞/ 38 阅读

相关【Layui】Layui下select下拉框不显示或没有效果

今天再用Layui写界面时，发现自己的select下拉框没有显示 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aH

心已赠人/ 2022年11月27日 12:06/ 0 赞/ 359 阅读

相关 layui表格单元格中插入下拉框

这个实现采用了layui 社区一位大神的代码，在此感谢大神的分享，我自己做个记录，也给使用layui 的小伙伴们做一个分享。思路是这样的 > 可以使用自定义模板返回se

雨点打透心脏的1/2处/ 2022年10月27日 13:54/ 0 赞/ 735 阅读

相关 layui——下拉框监听

<select name="" id="userSelect" lay-filter="userClass"> <option value="0">用户

迷南。/ 2022年05月12日 13:34/ 0 赞/ 414 阅读

相关 layui的下拉搜索框

html部分通过给select设定属性 lay-search 来开启搜索匹配功能，给select父级layui-form的类名，一定要搭配使用才能显示 <div c

小灰灰/ 2022年03月28日 09:37/ 1 赞/ 1657 阅读

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

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

Bertha 。/ 2021年09月24日 15:06/ 0 赞/ 1157 阅读