LayUI复杂表头多一列

博主作为一名后端开发中前端技术还说得过去的程序猿,在今天工作中突然遇到这么一个关于前端框架 Layui 的比较奇怪的问题:当我在通过 Layui 2.5.6 版本的数据表格功能,构建一个具有复杂表头的数据表格的时候,表格内容的最前面莫名其妙的多出来一列,使原本应该整齐的表格发生了显示异常。(如图)

在这里插入图片描述

好在问题在经过一番搜索和查阅 API 后得到了解决。特此把源码及解决过程整理出来,以加深印象。好了,话不多说,开整。

BUG 复现

文件目录结构如下:

在这里插入图片描述

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>LayUI 复杂表头问题</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body>
<div style="width: 900px; margin: auto;">
    <table class="layui-hide" id="test"></table>
</div>

<script src="layui/layui.all.js"></script>
<script>
    var data = [{
        "username": "张小三"
        , "amount": 18
        , "province": "浙江"
        , "city": "杭州"
        , "zone": "西湖区"
        , "street": "西溪街道"
        , "address": "西溪花园"
        , "house": "30栋1单元"
    }, {
        "username": "李小四"
        , "amount": 39
        , "province": "江苏"
        , "city": "苏州"
        , "zone": "姑苏区"
        , "street": "丝绸路"
        , "address": "天墅之城"
        , "house": "9幢2单元"
    }, {
        "username": "王小五"
        , "amount": 8
        , "province": "江西"
        , "city": "南昌"
        , "zone": "青山湖区"
        , "street": "艾溪湖办事处"
        , "address": "中兴和园"
        , "house": "1幢3单元"
    }, {
        "username": "赵小六"
        , "amount": 16
        , "province": "福建"
        , "city": "泉州"
        , "zone": "丰泽区"
        , "street": "南洋街道"
        , "address": "南洋村"
        , "house": "6幢1单元"
    }, {
        "username": "孙小七"
        , "amount": 12
        , "province": "湖北"
        , "city": "武汉"
        , "zone": "武昌区"
        , "street": "武昌大道"
        , "address": "两湖花园"
        , "house": "16幢2单元"
    }, {
        "username": "周小八"
        , "amount": 11
        , "province": "安徽"
        , "city": "黄山"
        , "zone": "黄山区"
        , "street": "汤口镇"
        , "address": "温泉村"
        , "house": "21号"
    }];

    layui.table.render({
        elem: '#test'
        , data: data
        , cols: [[
            // {title: '姓名', colspan: 1, colGroup: true}
            {title: '姓名', colspan: 1}
            , {title: '概览', colspan: 3}
            , {title: '详细', colspan: 4}], [
            {field: 'username', width:80,title: '联系人'}
            , {field: 'amount', width:80, title: '金额'}
            , {field: 'province', width:80, title: '省份'}
            , {field: 'city', width:80, title: '城市'}
            , {field: 'zone', width:80, title: '区县'}
            , {field: 'street', width:150, title: '街道'}
            , {field: 'address', width:150, title: '小区'}
            , {field: 'house', title: '门牌'}
        ]]
    });
</script>
</body>
</html>

这个时候,上述的代码在浏览器中打开的样子就是文章开头时的图片。那么问题该如何解决呢?

解决思路

其实上述问题的解决方案非常简单,即:

JavaScript 中的 colspan: 1 的属性后添加 colGroup: true 属性即可。

在本案例中,则直接将注释掉的那行代码放开,将 {title: '姓名', colspan: 1} 注释掉即可。

在这里插入图片描述
效果如上图所示。

-------------------- 你说你很累,可谁又活的顺风顺水。 --------------------

相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页