Layui完美解决 表格+Select 下拉选框被被遮挡问题


踩坑了又……想做一个如下图所示的样子:

然后发现一个史诗级大坑…下拉框会被遮挡。百度解决方案,发现相同情况的人还有很多。无外乎是layui中超出部分默认是hiden,然后自己手动设置成 overflow:visible; 即可。

然后,遮挡问题是解决了,但是我的标题一栏的高度怎么就没了???影响了我其他的滚动条。继续坑……然后找到了继续的解决方案,需要加一段css。完美的解决了问题…

话不多说,贴代码:(为了方便阅读,突出重点,我就贴出了需要修改的css和js部分,位置一看就懂。)

</body
<style>
     //css 部分
    .layui-table-cell {
        display:table-cell;
        vertical-align: middle;
        height:auto;
        overflow:visible;
        text-overflow:inherit;
        white-space:normal;
    }
</style>
<script type="text/html" id="statusTpl">
                            <select name="status" lay-filter="status">
                              <option value="-">未审核</option>
                              <option value="Y">通过</option>
                              <option value="N">不通过</option>
                            </select>
                    </script>
<script>
    layui.use(['laydate','form', 'table'], function() {
        
        var tableIn = table.render({
            
            size: 'lg',
            cols: [
                [
                   
                    { field: 'check', width: 120, title: '状态', templet: '#statusTpl'},
                  
                ]
            ],
            done: function(res, curr, count){
                //数据渲染完的回调。
                //由于layui 设置了超出隐藏,所以这里改变下,以兼容操作按钮的下拉菜单
                $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible');
            },
            
        });
     
    });
</script>
</html>


最新回复 (0)
发新帖