layui使用问题

1.layui动态表格的复杂表头

使用layui动态表格时，用到复杂表头，如果colspan=1时，会出现一例空白列，根本问题应该是layui 在复杂表头时, colspan 必须大于1，解决办法是，修改colspan为2，然后添加一列空白列{title: ‘’, field:‘’, hide: true}

table.render({
  elem: '#table-contract-list',
    data: contract_goods_data,
    defaultToolbar: [],
    limit: '30',
    page: true,
    skin: 'line',
    cols: [[
        {type: 'numbers', rowspan: 2,},
        { title: '复杂表头', align: 'center', colspan: 2 },
    ],
    [
        {
            field: 'test-col', title: '表头1/表头2', align: 'center', templet: function (d) {
                return '<a>' + d.old_supply_price + ' / ' + d.old_model_price + '</a>';
            }
        },
        { title: '', field: '', hide: true },
    ]]
    , done: function () {
        layer.closeAll('loading');
    }
});

colspan为1

2.layUI-layDate时间控件点击闪烁或显示位置不合理

layui.use('laydate', function(){
	var laydate = layui.laydate;
	//执行一个laydate实例
	laydate.render({
		 elem: '' //指定元素
		,trigger: 'click' //自动弹出控件的事件，采用click弹出
	});
});

选中时间后的事件回调

laydate.render({
    elem: '#dateRange',
    theme: '#1E9FFF',
    trigger: 'click',
    done: function (value, date) {
        $("#search").trigger("click");
    }
});

3.数据表格最后出现空列

解决方法

1、在done函数中增加样式

$('.layui-table').css("width", "100%");

done: function (res, curr, count) {
  $('.layui-table').css("width","100%");
  $("th[data-field='bar']").css("border-right",'none');
}

2.修改css样式

.layui-table-view .layui-table {
    width: 100% !important;
}
 
.layui-table th {
    text-align: -webkit-center !important;
}

4.layer.msg()抖动问题

layer.msg("msg信息框", function () {
	// do somethings..
});

处理

layer.msg("msg信息框", { shift: -1, time: 1000 }, function () {
	// do somethings..
});

使用抖动可以做抖动提示

layer.msg('抖动提示', {
    //1:正确；2:错误；3:询问；4:锁定；5:失败；6：成功；7:警告；16：加载
    icon : 7,
    offset : 0,
    shift : 6, //抖动效果
    time : 3000
});

5.layui使用了tab后操作出现滚动条

layui部分原生样式为overflow: scroll或者overflow: auto
当页面进行操作比如点击下拉时页面内容出现改变可能导致出现滚动条

.layui-tab-item.layui-show{
    overflow: hidden;
}

6.layui使用进度条设置展示百分比不展示问题

在文档中只标识通过对父级元素设置属性 lay-showPercent=“yes” 来开启进度比的文本显示

let saveRate = 0, fun;
let show = layer.open({
    area: ['420px', '370px'],
    title: '保存进度',
    content: progress.innerHTML, 
    success: function (layero, indexProgress) {
        fun = setInterval(function () {
            element.progress('saveProgress', saveRate + '%');
            element.render('progress')
            if (saveRate >= 100) { 
                clearInterval(fun);
                /* 关闭进度条弹窗 */
                layer.close(show);
                layer.msg('保存成功',{icon:1})
                /* 关闭选择渠道以及合同得弹窗 */
                layer.close(index)
            } else {
                saveRate = saveRate + 10;
            }
        }, 500)
    },
    end: function () {
        element.progress('saveProgress', '0%');
        element.render('progress')
        clearInterval(fun);
        layer.close(index)
    }
});

7.下拉提示后进行切换

layui交互，在惦记切换时数据已经进行切换，在点击时赋值未修改的数据，进行交互后重新赋值

form.on('select(channel_name)', function (data) {
   if (isSaveChannel) {
       layer.alert('请保存当前修改', { icon: 2 })
       layui.form.val('searchForm', { channel_name: cur_channel_id })
       return
   }
   cur_channel_id = data.value
})