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

Bertha 。 2021-09-24 15:06 1139阅读 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 条评论，1139人围观）

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

相关阅读

相关 LayUI # 多选下拉框

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

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

相关解决数据表格单选框显示不全问题

.laytable-cell-radio { padding: 10px 15px 0 15px; } ![20201019173707

水深无声/ 2022年12月16日 09:09/ 0 赞/ 169 阅读

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

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

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

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

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

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

相关 layui——下拉框监听

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

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

相关 layui的下拉搜索框

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

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

相关 layui数据表格显示图片/头像

先上代码 templet: '<div><img style="height:35px;width:35px;border-radius:50%;line-he

清疚/ 2022年02月20日 06:13/ 0 赞/ 591 阅读

相关 springBoot+layui+jquery+layui弹窗下拉框

layui 的增删改查。。。废话不多说上代码由于时间原因暂时只实现了查询的后台完整代码其他的会之后贴出来其实与查询相似有需要的可以等我贴出也可以照着查询仿写

Bertha 。/ 2022年01月07日 07:39/ 0 赞/ 446 阅读

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

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

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

相关 layui下拉框赋默认值

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="vie

素颜马尾好姑娘i/ 2021年09月23日 08:10/ 0 赞/ 836 阅读