关于前端:vueelement动态表头的写法三

这个动静表头是比较复杂的，因为他的不固定的列的表头还是多级表头，这样的话，数据的层级就会比拟多，解决起来比较复杂。过后求教了在公司呆了12年的前端大佬才把这个动静表头解决好，上面还是看一下这个动静表头难在哪里吧

<el-table :data="tableListData" style="width: 100%" border height class="table-fixed">    <el-table-column prop="SectionName" label="标段名称" fixed :key=Math.random() width="120"        :render-header="labelHead">    </el-table-column>    <el-table-column prop="SectionScore" label="标段综合得分" fixed :key=Math.random() width="120"        :render-header="labelHead">    </el-table-column>    <el-table-column v-for="column in lstAssessColumns" :key="Math.random()" :label="column.columnName"        :render-header="labelHead">        <el-table-column v-for="child in column.children" :key="Math.random()" :label="child.columnName"            :render-header="labelHead" :prop="child.columnId" :render-header="labelHead" width="120">        </el-table-column>    </el-table-column>    <el-table-column v-for="column in lstAssessQualityColumns" :key="Math.random()"        :render-header="labelHead" :label="column.columnName">        <el-table-column v-for="child in column.children" :key="Math.random()" :label="child.columnName"            :prop="child.columnId" :render-header="labelHead" width="160">        </el-table-column>    </el-table-column>    <el-table-column v-for="column in lstMesureColumns" :key="Math.random()" :label="column.columnName"        :render-header="labelHead">        <el-table-column v-for="child in column.children" :key="Math.random()" :label="child.columnName"            :prop="child.columnId" :render-header="labelHead" width="160">            <template scope="scope">                <div v-if="Object.prototype.toString.call(scope.row[child.columnId]) === '[object Array]'">                    <div v-for="d in scope.row[child.columnId]">{{d}}</div>                </div>                <div v-else>                    {{scope.row[child.columnId]}}                </div>            </template>        </el-table-column>    </el-table-column></el-table>

var rows=[    {        "TaskId": "bb889c39-ede9-40f2-a52c-2763de810f6b",        "TaskName": "12月份精装修品质巡逻三标唐彩",        "SectionId": "ee571575-db53-4b09-b96b-81abfd871fba",        "SectionName": "精装修标段-唐彩装璜",        "SectionScore": 92.21,        "UploadTime": "2020-12-23T08:26:30.06",        "strUploadTime": "2020-12-23",        "Rank": 1,        "Ranking": 1,        "ContractorSupplierLeader": "韩仕才",        "SupervisorSupplierLeader": "王昆",        "BuildingName": "8#,15#",        "BuildingArea": 59180.53,        "lstAssessTable": [            {                "TableId": "8323f449-3903-438b-a1ab-3f2eff15dafa",                "TableName": "全装修工程材料查看评估",                "RowNo": null,                "TableScore": 94.74,                "Weight": 20,                "WeightScore": 18.95,                "MajorType": null,                "Attribute": null            },            {                "TableId": "c63c9e47-4a13-4391-bd15-3978efc19344",                "TableName": "全装修工程平安文化施工查看评分表",                "RowNo": null,                "TableScore": 86.11,                "Weight": 20,                "WeightScore": 17.22,                "MajorType": null,                "Attribute": null            },            {                "TableId": "5d369cb0-a028-4174-9945-d17c59df2e28",                "TableName": "全装修工程质量检查评分表",                "RowNo": null,                "TableScore": 91.32,                "Weight": 30,                "WeightScore": 27.4,                "MajorType": null,                "Attribute": null            }        ],        "lstAssessTableQuality": [],        "lstMesureTable": [            {                "TableId": "0a2b1535-1e17-4090-bc95-557101c56e3a",                "TableName": "全装修工程实测数据记录表（简装）",                "RowNo": null,                "MesureTableScore": 95.48,                "Weight": 30,                "WeightScore": 28.64,                "LstMesureRange": [                    {                        "BuildingName": "15#",                        "YIndex": 36,                        "HouseNo": "3601",                        "SumPassCount": 87,                        "SumMesureCount": 88,                        "MesureRangeScore": 98.86                    },                    {                        "BuildingName": "8#",                        "YIndex": 37,                        "HouseNo": "3701",                        "SumPassCount": 154,                        "SumMesureCount": 163,                        "MesureRangeScore": 94.48                    },                    {                        "BuildingName": "15#",                        "YIndex": 37,                        "HouseNo": "3702",                        "SumPassCount": 86,                        "SumMesureCount": 88,                        "MesureRangeScore": 97.73                    },                    {                        "BuildingName": "8#",                        "YIndex": 36,                        "HouseNo": "3601",                        "SumPassCount": 81,                        "SumMesureCount": 88,                        "MesureRangeScore": 92.05                    }                ]            }        ],        "QualityScore": 0,        "QualitySumWeight": 0,        "QualityWeightScore": 0    },    {        "TaskId": "dc907d74-c91d-417b-9995-c3e1108b4237",        "TaskName": "精装修品质巡逻四标和胜",        "SectionId": "74efe0bd-1944-4976-9f7f-411665aafef5",        "SectionName": "精装修标段-和胜装璜",        "SectionScore": 91.26,        "UploadTime": "2020-12-23T08:29:32.52",        "strUploadTime": "2020-12-23",        "Rank": 2,        "Ranking": 2,        "ContractorSupplierLeader": "郭治国",        "SupervisorSupplierLeader": "王昆",        "BuildingName": "19#,18#",        "BuildingArea": 67122.61,        "lstAssessTable": [            {                "TableId": "5d369cb0-a028-4174-9945-d17c59df2e28",                "TableName": "全装修工程质量检查评分表",                "RowNo": null,                "TableScore": 89.06,                "Weight": 30,                "WeightScore": 26.72,                "MajorType": null,                "Attribute": null            },            {                "TableId": "8323f449-3903-438b-a1ab-3f2eff15dafa",                "TableName": "全装修工程材料查看评估",                "RowNo": null,                "TableScore": 92.86,                "Weight": 20,                "WeightScore": 18.57,                "MajorType": null,                "Attribute": null            },            {                "TableId": "c63c9e47-4a13-4391-bd15-3978efc19344",                "TableName": "全装修工程平安文化施工查看评分表",                "RowNo": null,                "TableScore": 84.78,                "Weight": 20,                "WeightScore": 16.96,                "MajorType": null,                "Attribute": null            }        ],        "lstAssessTableQuality": [],        "lstMesureTable": [            {                "TableId": "0a2b1535-1e17-4090-bc95-557101c56e3a",                "TableName": "全装修工程实测数据记录表（简装）",                "RowNo": null,                "MesureTableScore": 96.71,                "Weight": 30,                "WeightScore": 29.01,                "LstMesureRange": [                    {                        "BuildingName": "18#",                        "YIndex": 12,                        "HouseNo": "1201",                        "SumPassCount": 75,                        "SumMesureCount": 77,                        "MesureRangeScore": 97.4                    },                    {                        "BuildingName": "19#",                        "YIndex": 13,                        "HouseNo": "1302",                        "SumPassCount": 54,                        "SumMesureCount": 56,                        "MesureRangeScore": 96.43                    },                    {                        "BuildingName": "18#",                        "YIndex": 10,                        "HouseNo": "1002",                        "SumPassCount": 67,                        "SumMesureCount": 70,                        "MesureRangeScore": 95.71                    },                    {                        "BuildingName": "19#",                        "YIndex": 10,                        "HouseNo": "1002",                        "SumPassCount": 62,                        "SumMesureCount": 64,                        "MesureRangeScore": 96.88                    },                    {                        "BuildingName": "18#",                        "YIndex": 8,                        "HouseNo": "801",                        "SumPassCount": 68,                        "SumMesureCount": 70,                        "MesureRangeScore": 97.14                    }                ]            }        ],        "QualityScore": 0,        "QualitySumWeight": 0,        "QualityWeightScore": 0    },    {        "TaskId": "13f62f14-dbf0-4330-9fe4-bfded7eaa16a",        "TaskName": "2020年12月简装评估查看",        "SectionId": "de10a60b-6ce8-46dc-836c-20e7dbafadce",        "SectionName": "印二标段",        "SectionScore": 90.89,        "UploadTime": "2020-12-25T07:55:25.443",        "strUploadTime": "2020-12-25",        "Rank": 3,        "Ranking": 3,        "ContractorSupplierLeader": "",        "SupervisorSupplierLeader": "王昆",        "BuildingName": "5#",        "BuildingArea": 25481.15,        "lstAssessTable": [            {                "TableId": "8323f449-3903-438b-a1ab-3f2eff15dafa",                "TableName": "全装修工程材料查看评估",                "RowNo": null,                "TableScore": 92.86,                "Weight": 20,                "WeightScore": 18.57,                "MajorType": null,                "Attribute": null            },            {                "TableId": "5d369cb0-a028-4174-9945-d17c59df2e28",                "TableName": "全装修工程质量检查评分表",                "RowNo": null,                "TableScore": 87.33,                "Weight": 30,                "WeightScore": 26.2,                "MajorType": null,                "Attribute": null            },            {                "TableId": "c63c9e47-4a13-4391-bd15-3978efc19344",                "TableName": "全装修工程平安文化施工查看评分表",                "RowNo": null,                "TableScore": 82.93,                "Weight": 20,                "WeightScore": 16.59,                "MajorType": null,                "Attribute": null            }        ],        "lstAssessTableQuality": [],        "lstMesureTable": [            {                "TableId": "0a2b1535-1e17-4090-bc95-557101c56e3a",                "TableName": "全装修工程实测数据记录表（简装）",                "RowNo": null,                "MesureTableScore": 98.42,                "Weight": 30,                "WeightScore": 29.53,                "LstMesureRange": [                    {                        "BuildingName": "5#",                        "YIndex": 8,                        "HouseNo": "801",                        "SumPassCount": 37,                        "SumMesureCount": 38,                        "MesureRangeScore": 97.37                    },                    {                        "BuildingName": "5#",                        "YIndex": 10,                        "HouseNo": "1002",                        "SumPassCount": 38,                        "SumMesureCount": 38,                        "MesureRangeScore": 100                    },                    {                        "BuildingName": "5#",                        "YIndex": 14,                        "HouseNo": "1401",                        "SumPassCount": 38,                        "SumMesureCount": 38,                        "MesureRangeScore": 100                    },                    {                        "BuildingName": "5#",                        "YIndex": 11,                        "HouseNo": "1102",                        "SumPassCount": 37,                        "SumMesureCount": 38,                        "MesureRangeScore": 97.37                    },                    {                        "BuildingName": "5#",                        "YIndex": 7,                        "HouseNo": "701",                        "SumPassCount": 37,                        "SumMesureCount": 38,                        "MesureRangeScore": 97.37                    }                ]            }        ],        "QualityScore": 0,        "QualitySumWeight": 0,        "QualityWeightScore": 0    }]

if (rows && rows.length > 0) {    var lstAssessColumnsDD = {}    _this.lstAssessColumns = []    var lstAssessQualityDD = {}    _this.lstAssessQualityColumns = [{        columnName: '标段品质危险加权分',        columnId: 'lstAssessTableQuality',        children: []    }]    var lstMesureColumnsDD = {}    _this.lstMesureColumns = []    rows.forEach(function (row) {         var lstAssessTable = row.lstAssessTable        if (lstAssessTable) {            lstAssessTable.forEach(function (item) {                //去重解决                if (!lstAssessColumnsDD[item.TableId]) {                    lstAssessColumnsDD[item.TableId] = true                    //解决多级表头，并把行转成列                    _this.lstAssessColumns.push({                        columnName: item.TableName + `(${item.Weight}%)`,                        columnId: item.TableId,                        children: [                            {                                columnId: item.TableId + '_TableScore',                                columnName: '标段平安文化分'                            },                            {                                columnId: item.TableId + '_WeightScore',                                columnName: '加权得分'                            }                        ]                    })                }                _this.$set(row, item.TableId + '_TableScore', item.TableScore)                _this.$set(row, item.TableId + '_WeightScore', item.WeightScore)            })        }        var lstAssessQuality = row.lstAssessTableQuality        if (lstAssessQuality) {            lstAssessQuality.forEach(function (item) {                if (!lstAssessQualityDD[item.TableId]) {                    lstAssessQualityDD[item.TableId] = true                    _this.lstAssessQualityColumns[0].children.push({                        columnId: item.TableId + '_TableScore',                        columnName: item.TableName + `(${item.Weight}%)`                    })                }                _this.$set(row, item.TableId + '_TableScore', item.TableScore)            })          }        var lstMesureTable = row.lstMesureTable        if (lstMesureTable) {            lstMesureTable.forEach(function (item) {                  if (!lstMesureColumnsDD[item.TableId]) {                    lstMesureColumnsDD[item.TableId] = true                    _this.lstMesureColumns.push({                        columnName: item.TableName + `(${item.Weight}%)`,                        columnId: item.TableId,                        children: [{                                columnId: item.TableId + '_HouseNo',                                columnName: '实测测区'                            },                            {                                columnId: item.TableId + '_MesureRangeScore',                                columnName: '测区得分'                            },                            {                                columnId: item.TableId + '_MesureTableScore',                                columnName: '实测实量均匀得分'                            },                            {                                columnId: item.TableId + '_WeightScore',                                columnName: '加权得分'                            }                        ]                    })                }                _this.$set(row, item.TableId + '_HouseNo', item.LstMesureRange && item.LstMesureRange.map(function (d) {                    return d.HouseNo                }) || [])                _this.$set(row, item.TableId + '_MesureRangeScore', item.LstMesureRange && item.LstMesureRange.map(function (d) {                    return d.MesureRangeScore                }) || [])                _this.$set(row, item.TableId + '_MesureTableScore', item.MesureTableScore)                _this.$set(row, item.TableId + '_WeightScore', item.WeightScore)            })                                              }    })    _this.lstAssessQualityColumns[0].children.push({        columnId: 'QualityScore',        columnName: '标段品质危险得分'    })    _this.lstAssessQualityColumns[0].children.push({        columnId: 'QualityWeightScore',        columnName: '加权得分'    })}