el-table 纵向垂直表头处理
项目中表格展示会遇到需要纵向垂直表头情况，下面，我们基于el-table组件来实现这种表格。
以下是这次需要用到的数据表格，已知左侧违章名称是固定的，而月份是不固定的，在后端返回数据格式已确定的情况下，需要将左侧作为表头展示。
第一步
先将 el-table 进行编辑，el-table 中的 data 属性数据我们需要进行重新处理，将原来的数据进行纵横转换，这一步理解起来会比较复杂。放到 js 中去讲解
<el-table v-else ref="tableRef" :data="getIValues" :show-header="false" border>
<el-table-column v-for="(item, index) in getIHeaders" :key="index" :prop="item" align="center"> </el-table-column>
</el-table>第二步
数据配置 数据我们需要单独配一次 headers，将原来的表头改成数据动态生成的方式。这个表头的配置需要按照实际数据的 键 与 名称 进行对应。最终渲染时由 第三步 的 getHeaders 来提供数据。具体 getHeaders 要做什么，我们第三步来讲解
const iHeaders = ref([
{
prop: 'month',
label: '违章名称'
},
{
prop: 'tiredNumber',
label: '疲劳驾驶'
},
{
prop: 'overspeedNumberMax',
label: '超速（>10%）'
},
{
prop: 'overspeedNumberMin',
label: '超速（≤10%）'
},
{
prop: 'trafficViolationsNumber',
label: '交通违章'
},
{
prop: 'otherNumber',
label: '其他'
}
])第三步
getHeaders 与 getValues 这两个函数我们做计算属性直接使用即可
const getIHeaders = computed(() => {
return illegalData.value.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
})
const getIValues = computed(() => {
return iHeaders.value.map(item => {
return illegalData.value.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: cur[item.prop] }), { title: item.label })
})
})getHeaders:
先看打印结果：[ "title", "value0", "value1", "value2" ]
可能你不明白为什么要这么做，想象一下，原来的纵表改为横表以后，我们的第一列就是 title 第二列开始往后都将是 value 但是我们并不知道有多少个 value，所以我们需要通过这种方式来动态的去生成表头，不能使用原来的表头了
既然表头通过[ "title", "value0", "value1", "value2" ]这个表头定死了，也就意味着我们的数据结果，也必须以这种名字来命名。同时也需要想到 数组中的每个属性就对应的是一列
getValues:
先看打印结果[{
"title": "违章名称",
"value0": "2024年08月",
"value1": "2024年09月",
"value2": "2024年10月"
}]
通过我们的纵横转换以后，我们的数据结果将会变为 数组中的每一个对象都将是一行，每一个属性都将是一列。