layui数据表格固定头部和第一列、colspan合并列

刚看到原型图的时候，纳尼？不是跟我开玩笑吧，小女子资历尚浅，还真没做过像这样的功能，然后就是各种找度娘，可是都没有找到合适的，很多都是行合并，真的是头疼呀！再纠结是用VUE实现还是用layui实现好，在最后挣扎下，还是选择了用layui。最后加上从各大神的demo中得到的灵感。在这里记录一下，希望可以帮助到有需要的人啦~

移动端展示效果如下：

 <script>

 layui.use('table', function(){
 var table = layui.table;
 //第一个实例
 table.render({
 elem: '#demo'
 ,height:document.body.offsetHeight
 ,url: './workStatu.json' //数据接口
 ,cols: [[ //表头
 {field: 'name', title: '第13周', width:100,fixed: 'left',align:'center'}
 ,{field: 'vlcc', title: '周一(3月25日)', width:115,align:'center'}
 ,{field: 'suezmax', title: '周一(3月25日)', width:115,align:'center'}
 ,{field: 'aframax', title: '周一(3月25日)', width:115,align:'center'}
 ,{field: 'panamax', title: '周一(3月25日)', width:119,align:'center'}
 ,{field: 'crudeoilmr', title: '周一(3月25日)', width:115,align:'center'}
 ]]
 ,done:function(res,curr,count){
 colSpan()
 }
 });
 });

 function colSpan(){
 var tab = document.querySelector("div .layui-table-main .layui-table");//获取目标tabel
 var maxRow = 6, val, count, start;
 count = 1;
 val = "";
 for(var i = 0;i<tab.rows.length;i++){ //遍历所有行
 for(var col = maxRow - 1; col >= 1; col--){ //遍历每一行的每一个td
 if(val == tab.rows[i].cells[col].innerText){ //判断前一个td和后一个td是否相同
 if(tab.rows[i].cells[col].innerText.length>=4){ //判断td的值的长度是否大于4，因为这里的需求是长度大于4有相同的才合并
 count++;
 tab.rows[i].cells[col].colSpan = count;
 for(var j = 1;j<count;j++){
 tab.rows[i].cells[j+col].style.display = "none";//相邻的有相同的值，第一个设置colspan，后面的隐藏
 }
 }
 }else{
 if(count>1){
 count = 1;
 }
 val = tab.rows[i].cells[col].innerText;
 }
 }
 }
 }

 </script>