el-table 实现纵向多级表头

为了实现上图效果，最开始打算用el-row、el-col去实现，但发现把表头和数据分成两大列时，数据太多时会导致所在格高度变高。但由于每一格数据肯定不一样，为保持高度样式一致，就需要我们手动去获取最高格的高度之后再设置给其他格，很麻烦..

改写el-table相对来说更简单。关键点：

1、设置:show-header="false"隐藏原本的表头；

2、将纵向表头当成数据，放在table的最前列；

3、如果有多级表头，就得通过设置:span-method="objectSpanMethod"去合并行或列；

4、处理后端返回的数据格式。

一、el-table大致框架：

<template><el-table :show-header="false" :span-method="objectSpanMethod" ref="readinessRef" class="tableBox" v-loading="loading" :data="getIValues" fit border style="width: 100%" :cell-style="{'background-color': '#fafafa', 'color': 'rgba(51, 66, 97, 0.6)', 'font-weight': '300'}"><el-table-column v-for="(item, index) in getIHeaders" :key="index" :prop="item" align="center" :width="[0,1].indexOf(index)!=-1 ? '150px':'300px'" :min-width="[0,1].indexOf(index)==-1 ? '300px':''"><template #default="scope"><div v-if="[0,1].indexOf(index)==-1 && scope.row.title == '能力图解'" class="perpareBox"><ul style="text-align: left;"><li v-for="(liItem,liIndex) in getResList(scope.row[item][scope.row.moldTitle])" :key="liIndex">{{liItem}}</li></ul></div><div v-if="index!=0 && scope.row.title == '人力资源准备度'" class="perpareBox"><div class="num">{{scope.row[item]}}</div><div v-if="parseFloat(scope.row[item])<0.5" class="circleRed"></div><div v-else-if="parseFloat(scope.row[item])>=0.8" class="circleGreen"></div><div v-else class="circleYellow"></div></div></template></el-table-column></el-table>
</template>

二、所需数据格式：

1、表头：

const iHeaders = ref([{prop: 'groupName',label: '工作群组'},{prop: 'duty',label: '能力图解'},{prop: 'xuqNum',label: '需求数量'},{prop: 'passNum',label: '合格数'},{prop: 'perpare',label: '人力资源准备度'}
])const getIHeaders = computed(() => {return readinessList.value.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title', 'moldTitle'])
})

多级表头数据：

const moldData = ref([{"id": 2,"name": "知识技能"},{"id": 3,"name": "硬性条件"},{"id": 4,"name": "能力素质"},{"id": 104,"name": "组织贡献"}])

处理表头合并行：

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {let moldDataIndex = moldData.value.length// console.log('moldDataIndex', moldDataIndex)if (rowIndex < 1 || rowIndex > moldDataIndex) {if (columnIndex === 0) {return [1, 2] // 一、二列表头合并} else if (columnIndex === 1) {return [0, 0]}}if (columnIndex === 0) {if (rowIndex == 1) {return {rowspan: moldDataIndex, //二、三、四、五行表头合并colspan: 1}} else {return {rowspan: 0,colspan: 0}}}
}

2、处理后端返回数据：

后端返回格式：

const readinessList = ref([{"groupName": "测试222","xuqNum": 200,"passNum": 0,"perpare": "0.0%","duty": {"硬性条件": [],"知识技能": [{"name": "知识技能","responsibility": "法规政策"},{"name": "知识技能","responsibility": "日常办公软件操作"},{"name": "知识技能","responsibility": "客户关系与维护"}],"组织贡献": [],"能力素质": [{"name": "能力素质","responsibility": "办公软件1"},{"name": "能力素质","responsibility": "特别能吃苦"}]}}
])

处理数据的函数：

const getIValues = computed(() => {return handleData(readinessList.value)
})function handleData(data) {let list = []if (data.length != 0) {iHeaders.value.forEach(headers => {let obj = {}if (headers.label == '能力图解') {moldData.value.forEach(mold => { // 处理多级表头obj = data.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: cur[headers.prop] }), { title: headers.label, moldTitle: mold.name })list.push(obj)})} else {obj = data.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: cur[headers.prop] }), { title: headers.label })list.push(obj)}})return list} else {return []}
}

处理后的数据格式：