el-table 表头竖向排列实现 升级版
![](https://img2023.cnblogs.com/blog/1157512/202303/1157512-20230325162143827-461031640.jpg)
<div v-for="(item, index) in allItems" :key="index" class="mb20"> <div class="arrangeTitle mb10 mt10"> <headLine> <div class="title"> <div class="fb cor3" style="font-size: 20px"> {{ item.itemName }} </div> </div> </headLine> </div> <div class="mt10 mb10"></div> <!-- 系统外 --> <div class="my-self-table"> <el-table v-if="false" :data="item.evaluatorDtos" border> <el-table-column prop="evaluaterName" label="评价导入人" width="180" align="center" > </el-table-column> <el-table-column prop="appointmentTypeName" label="职位" width="180" align="center" > </el-table-column> <el-table-column prop="gradeStatusDesc" label="评价进度" align="center" > </el-table-column> </el-table> <div v-if="item.evaluatorDtos && item.evaluatorDtos.length > 0"> <!-- tableData :data="getValuesNew(item.evaluatorDtos)" --> <el-table style="width: 100%" :data="getValuesNew(item.evaluatorDtos)" :show-header="false" :cell-style="cellStyle" border > <el-table-column v-for="(item, index) in getHeadersNew(item.evaluatorDtos)" :key="index" :prop="item" min-width="150" > </el-table-column> </el-table> </div> </div> </div>
allItems: [],
headers: [
{
prop: 'appointmentTypeName',
// propObj: 'objName',
label: '先进企业',
},
{
prop: 'gradeStatusDesc',
label: '进步企业',
},
],
computed: {
getHeadersNew () {
return newTable => {
return newTable.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
}
},
getValuesNew () {
return newTable => {
console.log(this.headers)
console.log(newTable)
return this.headers.map(item => {
console.log(item)
let tableEnd = newTable.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: item.propObj ? cur[item.prop][item.propObj] : cur[item.prop] }), { 'title': item.label, });
return tableEnd
});
}
}
},
this.allItems = [
{
"evaluationObjectId": "597EDCC7DC6242DB8C22D77DA0F7F0D3",
"itemId": "6F1B901CAE01474F807F5DA209B99871",
"itemName": "测测",
"scoreOriginType": 1,
"scoreOriginTypeDesc": "本系统内评分",
"evaluatorDtos": [
{
"evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
"evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
"evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
"evaluaterName": "余炼炼",
"scoredWeight": 100,
"raterGroupName": "先进企业",
"appointmentType": "100008",
"appointmentTypeName": "一般技术人员",
"gradeStatus": 2,
"gradeStatusDesc": "已提交"
},
{
"evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
"evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
"evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
"evaluaterName": "余炼炼1",
"scoredWeight": 100,
"raterGroupName": "先进企业",
"appointmentType": "100008",
"appointmentTypeName": "二般技术人员",
"gradeStatus": 2,
"gradeStatusDesc": "已提交"
},
{
"evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
"evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
"evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
"evaluaterName": "余炼炼2",
"scoredWeight": 100,
"raterGroupName": "先进企业",
"appointmentType": "100008",
"appointmentTypeName": "",
"gradeStatus": 2,
"gradeStatusDesc": "已提交"
}
]
}, {
"evaluationObjectId": "597EDCC7DC6242DB8C22D77DA0F7F0D3",
"itemId": "6F1B901CAE01474F807F5DA209B99871",
"itemName": "测测2",
"scoreOriginType": 1,
"scoreOriginTypeDesc": "本系统内评分",
"evaluatorDtos": [
{
"evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
"evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
"evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
"evaluaterName": "余炼炼",
"scoredWeight": 100,
"raterGroupName": "先进企业",
"appointmentType": "100008",
"appointmentTypeName": "一般技术人员",
"gradeStatus": 2,
"gradeStatusDesc": "已提交"
},
{
"evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
"evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
"evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
"evaluaterName": "余炼炼",
"scoredWeight": 100,
"raterGroupName": "先进企业",
"appointmentType": "100008",
"appointmentTypeName": "一般技术人员",
"gradeStatus": 2,
"gradeStatusDesc": "已提交"
}
]
}, {
"evaluationObjectId": "597EDCC7DC6242DB8C22D77DA0F7F0D3",
"itemId": "6F1B901CAE01474F807F5DA209B99871",
"itemName": "测测2",
"scoreOriginType": 1,
"scoreOriginTypeDesc": "本系统内评分",
"evaluatorDtos": [
{
"evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
"evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
"evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
"evaluaterName": "余炼炼",
"scoredWeight": 100,
"raterGroupName": "先进企业",
"appointmentType": "100008",
"appointmentTypeName": "一般技术人员",
"gradeStatus": 2,
"gradeStatusDesc": "已提交"
},
{
"evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
"evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
"evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
"evaluaterName": "余炼炼",
"scoredWeight": 100,
"raterGroupName": "先进企业",
"appointmentType": "100008",
"appointmentTypeName": "一般技术人员",
"gradeStatus": 2,
"gradeStatusDesc": "已提交"
},
{
"evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
"evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
"evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
"evaluaterName": "余炼炼",
"scoredWeight": 100,
"raterGroupName": "先进企业",
"appointmentType": "100008",
"appointmentTypeName": "一般技术人员",
"gradeStatus": 2,
"gradeStatusDesc": "已提交"
},
{
"evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
"evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
"evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
"evaluaterName": "余炼炼",
"scoredWeight": 100,
"raterGroupName": "先进企业",
"appointmentType": "100008",
"appointmentTypeName": "一般技术人员",
"gradeStatus": 2,
"gradeStatusDesc": "已提交"
},
{
"evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
"evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
"evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
"evaluaterName": "余炼炼",
"scoredWeight": 100,
"raterGroupName": "先进企业",
"appointmentType": "100008",
"appointmentTypeName": "一般技术人员",
"gradeStatus": 2,
"gradeStatusDesc": "已提交"
},
{
"evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
"evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
"evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
"evaluaterName": "余炼炼",
"scoredWeight": 100,
"raterGroupName": "先进企业",
"appointmentType": "100008",
"appointmentTypeName": "一般技术人员",
"gradeStatus": 2,
"gradeStatusDesc": "已提交"
},
{
"evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
"evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
"evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
"evaluaterName": "余炼炼",
"scoredWeight": 100,
"raterGroupName": "先进企业",
"appointmentType": "100008",
"appointmentTypeName": "一般技术人员",
"gradeStatus": 2,
"gradeStatusDesc": "已提交"
}
]
}
]