Advertisement

layui-table多级表头-数据和表头错位问题

阅读量:

如果colspan=1的时候会导致错位

复制代码
     /** * 初始化表格的列
     */
    ServCustmanagerKp.initColumn = function () {
        return [[
            {type: 'checkbox',fixed: 'left',rowspan:'3'},
            {type: 'numbers',title: '序号',fixed: 'left',rowspan:'3'},
            {field: 'dataMth', hide: true, title: '数据月份',rowspan:'3'},
            // {field: 'dataDt', align:"center", title: '数据日期'},
            // {field: 'instnNo', align:"center", title: '机构编码',rowspan:'3'},
    
            {align:"center", title: '客户经理信息',colspan:'4',rowspan:'2'},
            {align:"center", title: '营销质量管理<br/>(10分)',colspan:'2',rowspan:'2'},
            {align:"center", title: '贷后管理<br/>(10分)',colspan:'1',rowspan:'2'},
            {align:"center", title: '系统数据维护<br/>(5分)',colspan:'1',rowspan:'2',width:110},
            {align:"center", title: '贷款风险分类<br/>(5分)',colspan:'1',rowspan:'2',width:110},
            {align:"center", title: '基础客户、行业客户<br/>营销活动落实<br/>(20分)',colspan:'1',rowspan:'2',width:140},
            {align:"center", title: '团队协作<br/>(10分)',colspan:'1',rowspan:'2'},
            {align:"center", title: '产品营销保底任务考核<br/>(40分)',colspan:'5'},
            {field: 'hj', align:"center", title: '总分',rowspan:'3'},
    
            // {field: 'updateTime', align:"center", title: '更新时间'},
            // {field: 'updateUser', align:"center", title: '更新人'},
            // {align: 'center', toolbar: '#tableBar', title: '操作'}
    
        ],[
    
    
            {align:"center",title:'纯新增贷款授信户数保底<br/>(10分)',width:170},
            {align:"center",title:'纯新增贷款金额保底<br/>(10分)',width:160},
            {align:"center",title:'“e贷”类贷款授信户数保底<br/>(5分)',width:170},
            {align:"center",title:'独立营销存款保底<br/>(10分)',width:130},
            {align:"center",title:'联动营销保底<br/>(5分)',width:130},
    
    
        ],[
            {field: 'instnName', align:"center", title: '机构名称'},
            {field: 'custManagerId', align:"center", title: '揽存号'},
            {field: 'account', align:"center", title: '信贷工号'},
            {field: 'custManagerName', align:"center", title: '姓名'},
    
            {field: 'yxZlglDf', align:"center", title: '得分',width:70},
            {field: 'yxZlglYj', align:"center", title: '依据处罚文号',width:120},
    
            {field: 'dhglDf', align:"center", title: '得分'},
    
            {field: 'sjwhDf', align:"center", title: '得分',width:110},
    
            {field: 'fxflDf', align:"center", title: '得分',width:110},
    
            {field: 'hdlsDf', align:"center", title: '得分',width:140},
    
            {field: 'tjxzDf', align:"center", title: '得分'},
    
            {field:'newSxhsDf',align:"center",title:'得分',width:170},
            {field:'newVbalDf',align:"center",title:'得分',width:160},
            {field:'edSxhsDf',align:"center",title:'得分',width:170},
            {field:'dlyxVbalDf',align:"center",title:'得分',width:130},
            {field:'qtywDf',align:"center",title:'得分',width:130},
        ]];
    };
数据和表头会出现错行

数据和表头会出现错行的情况。

复制代码
       /** * 初始化表格的列
     */
    ServCustmanagerKp.initColumn = function () {
        return [[
            {type: 'checkbox',fixed: 'left',rowspan:'3'},
            {type: 'numbers',title: '序号',fixed: 'left',rowspan:'3'},
            {field: 'dataMth', hide: true, title: '数据月份',rowspan:'3'},
            // {field: 'dataDt', align:"center", title: '数据日期'},
            // {field: 'instnNo', align:"center", title: '机构编码',rowspan:'3'},
    
            {align:"center", title: '客户经理信息',colspan:'4',rowspan:'2'},
            {align:"center", title: '营销质量管理<br/>(10分)',colspan:'2',rowspan:'2'},
            {align:"center", title: '贷后管理<br/>(10分)',colspan:'1',rowspan:'2',colGroup:true},
            {align:"center", title: '系统数据维护<br/>(5分)',colspan:'1',rowspan:'2',width:110,colGroup:true},
            {align:"center", title: '贷款风险分类<br/>(5分)',colspan:'1',rowspan:'2',width:110,colGroup:true},
            {align:"center", title: '基础客户、行业客户<br/>营销活动落实<br/>(20分)',colspan:'1',rowspan:'2',width:140,colGroup:true},
            {align:"center", title: '团队协作<br/>(10分)',colspan:'1',rowspan:'2',colGroup:true},
            {align:"center", title: '产品营销保底任务考核<br/>(40分)',colspan:'5'},
            {field: 'hj', align:"center", title: '总分',rowspan:'3'},
    
            // {field: 'updateTime', align:"center", title: '更新时间'},
            // {field: 'updateUser', align:"center", title: '更新人'},
            // {align: 'center', toolbar: '#tableBar', title: '操作'}
    
        ],[
    
    
            {align:"center",title:'纯新增贷款授信户数保底<br/>(10分)',width:170,colGroup:true},
            {align:"center",title:'纯新增贷款金额保底<br/>(10分)',width:160,colGroup:true},
            {align:"center",title:'“e贷”类贷款授信户数保底<br/>(5分)',width:170,colGroup:true},
            {align:"center",title:'独立营销存款保底<br/>(10分)',width:130,colGroup:true},
            {align:"center",title:'联动营销保底<br/>(5分)',width:130,colGroup:true},
    
    
        ],[
            {field: 'instnName', align:"center", title: '机构名称'},
            {field: 'custManagerId', align:"center", title: '揽存号'},
            {field: 'account', align:"center", title: '信贷工号'},
            {field: 'custManagerName', align:"center", title: '姓名'},
    
            {field: 'yxZlglDf', align:"center", title: '得分',width:70},
            {field: 'yxZlglYj', align:"center", title: '依据处罚文号',width:120},
    
            {field: 'dhglDf', align:"center", title: '得分'},
    
            {field: 'sjwhDf', align:"center", title: '得分',width:110},
    
            {field: 'fxflDf', align:"center", title: '得分',width:110},
    
            {field: 'hdlsDf', align:"center", title: '得分',width:140},
    
            {field: 'tjxzDf', align:"center", title: '得分'},
    
            {field:'newSxhsDf',align:"center",title:'得分',width:170},
            {field:'newVbalDf',align:"center",title:'得分',width:160},
            {field:'edSxhsDf',align:"center",title:'得分',width:170},
            {field:'dlyxVbalDf',align:"center",title:'得分',width:130},
            {field:'qtywDf',align:"center",title:'得分',width:130},
        ]];
    };
在这里插入图片描述

当colspan=1的列加入 colGroup:true时就会正常显示了!!!

全部评论 (0)

还没有任何评论哟~