layui相关问题

 

layui table横向滚动条不显示问题：

博主使用的是layuimini模板，显示出数据后发现滚动条消失了，在谷歌、IE浏览器都看不到，在火狐浏览器上倒是能正常显示出来，若没有水平滚动条，是不利于展示数据种类多的数据。搞了好久，最后发现竟然是layuimini模板css样式把它给禁用了。注释掉即可。

/**自定义滚动条样式 */

::-webkit-scrollbar {

/*display: none*/

}

 

原文链接：https://blog.csdn.net/weixin_68729808/article/details/129675926

 

2、

 

 修改为如下：

 

 

 

 具体代码如下：

 

    {title: '状态', align: 'left',  minWidth: 130,  templet: '#switchBtn'},
   // {field: 'sort_no', title: '排序号',width: '5%',align: 'left'},
    {title: '操作',align: 'left', minWidth: 110, toolbar: '#currentTableBar', align: "right"}
]],
limits: [10, 15, 20, 25, 50, 100],
limit: 15,
page: true,
skin: 'line',
done: function(res, curr, count, origin){
    $('.layui-form-switch>div').each(function(index,dom){
        $(dom).replaceWith(function() {
            return "<em>" + this.innerHTML + "</em>";
        });
    });
},

　　

        <!-- 按钮开关 -->
        <script type="text/html" id="switchBtn">
            <input type="checkbox" name="status" value="@{{d.uuid}}" lay-skin="switch"
                   title="发布|下架"  data-url="/operateAct"
                   lay-filter="data-list-is-enabled" @{{ d.is_enabled =='1' ? 'checked' : '' }}>
        </script>

　　

        // 状态 - 开关操作
        form.on('switch(data-list-is-enabled)', function(obj){
            var that = this;
            var v_id = this.value;
            var v_status = obj.elem.checked ? 'enable' : 'disable';
            var status_post_url = urlPrefix+$(this).data('url'); //提交地址
            var status_post_data = {uuid: v_id, type: v_status}; //提交数据
            status_post_data._token = "<?php echo csrf_token() ?>";
            tools.sendAjaxRequest('POST',status_post_url,status_post_data,function (res) {
                if (res.code == 0) {
                    //按钮开关兼容性处理
                    let btnValArr = $(that).attr('title').split('|'); //获取按钮值
                    $(that).parent().find('.layui-form-switch>em').text(obj.elem.checked ? btnValArr[0] : btnValArr[1]);
                    layer.msg('操作成功', function () {
                        //location.reload();
                    });
                } else {
                    layer.msg(res.msg);
                }
            },function (res) {
                layer.msg('遇到一点小问题，请联系管理员');
            });
        });

 3、layui判断列表中按钮的显示隐藏处理：

                    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter0"></table>
                    <script type="text/html" id="currentTableBar">
                        @{{#  if(d.status ==0){ }}
                            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit"  lay-event="pass" >通过</a>
                            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete"  lay-event="refuse" >不通过</a>
                        @{{#  }else{ }}
                            <a class="layui-btn layui-btn-normal layui-btn-xs  layui-bg-orange data-count-edit"  lay-event="revoke" >撤销</a>
                        @{{# } }}
                       
                    </script>