layui通过下拉框动态渲染多级表头

之前遇到的坑 直接上图

选择第二个下拉框时

选回第一个下拉框时 表头全乱了

原本写法是 通过监听下拉框控制表格重载 报错

解决方法

通过监听下拉框 然后每次都重新表格实例化覆盖掉

// 监听 开支项目下拉框
            form.on("select(select_kaizhi)",function(data){
                switch(data.value){
                    case "个人办公用品":
                    renderCols(data.value)
                    break;
                    case "省内差旅费":
                    renderCols(data.value)
                    break;
                    case "招待费":
                    renderCols(data.value)
                    break;
                    case "宣传用品费":
                    renderCols(data.value)
                    break;
                    case "内部会议费":
                    renderCols(data.value)
                    break;
                    case "教育培训费":
                    renderCols(data.value)
                    break;
                }
            })

            function renderCols(name){ 
                if(name=="个人办公用品" || name=="省内差旅费" || name=="宣传用品费"){
                    var arr=[[  // 个人办公用品  省内差旅费  宣传用品费
                            { field:"val01",title:"部门",rowspan:"2",align:'center' },
                            { field:"val02",title:name+"",colspan:"3",align:'center' }
                        ],[
                            { field: 'val02',title: '2019年预算',align: 'center'},
                            { field: 'val03',title: '实际执行数',align: 'center'},
                            { field: 'val04',title: '预算执行率%',align: 'center'}
                    ]]
                    TableReload(arr)
                }
                if(name=="招待费"){
                    var arr=[[
                        { field:"val01",title:"部门",rowspan:"3",align:'center' },
                        { title:"招待费",colspan:"6",align:'center' }
                    ],[
                        { title:"商务接待",colspan:"3",align:'center' },
                        { title:"公务接待",colspan:"3",align:'center' }
                    ],[
                        { field: 'val02',title: '2019年预算',align: 'center'},
                        { field: 'val03',title: '实际执行数',align: 'center'},
                        { field: 'val04',title: '预算执行率%',align: 'center'},
                        { field: 'val05',title: '2019年预算%',align: 'center'},
                        { field: 'val06',title: '实际执行数%',align: 'center'},
                        { field: 'val07',title: '预算执行率%',align: 'center'}
                    ]]
                    TableReload(arr)
                }
            }

            function TableReload(cols){
                // 表格实例化
                tableObj = table.render({
                    elem: '#data_table',
                    id:'data_table',
                    title: '部门费用预算表',
                    cols: cols,
                    cellMinWidth: 100,
                    toolbar: '#toolbar',
                    defaultToolbar: ['exports'],
                    totalRow: false ,
                    page: true ,
                    limit: 50 ,
                    limits: [50, 100, 200, 1000] ,
                    skin: 'line',
                    data: [],
                    even: true
                });
            }

后面表头数据就完美解决了
之前用表格重载的方法table.reload(); 解决不了
后面用控制DOM 节点的方法 每次删除再添加 还是报错
借鉴：https://www.cnblogs.com/yysbolg/p/10654281.html