el-table 表头竖向排列实现
![](https://img2023.cnblogs.com/blog/1157512/202303/1157512-20230325152419786-53554896.jpg)
<el-table style="width: 100%" :data="getValues" :show-header="false" :cell-style="cellStyle" border > <el-table-column v-for="(item, index) in getHeaders" :key="index" :prop="item" > </el-table-column> </el-table>
data () { return { headers: [ { prop: 'date', label: '先进企业', }, { prop: 'name', label: '进步企业', }, ], tableData: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' } ] }; },
computed: { getHeaders () { return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title']) }, getValues () { return this.headers.map(item => { return this.tableData.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: cur[item.prop] }), { 'title': item.label, }); }); } },
cellStyle ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
return "background:#f5f7fa;text-align: center;";
}
},
复杂数据结构
前端通常二次处理后端直接返回数据
let flagTypeObjects = result.data.flagTypeObjects; let forNum = 0; let obj = {}; let objList = {}; // 组装headers数据 for (let i = 0; i < flagTypeObjects.length; i++) { flagTypeObjects[i].prop = this.itemCellStr + flagTypeObjects[i].flagType; flagTypeObjects[i].propObj = 'orgName'//值为所以多一层prop处理 flagTypeObjects[i].label = flagTypeObjects[i].flagTypeName; if (flagTypeObjects[i].flagTypeOrgDetails.length > forNum) { forNum = flagTypeObjects[i].flagTypeOrgDetails.length; } objList[flagTypeObjects[i].prop] = flagTypeObjects[i].flagTypeOrgDetails; obj[flagTypeObjects[i].prop] = ''; } console.log(obj) console.log(objList) let newArr = []; // 组装table数据 for (let j = 0; j < forNum; j++) { let newObj = { ...obj }; for (let key in objList) { if (objList[key][j]) { // objList[key][j]为对象{"orgId": "","orgName": ""},所以多一层prop处理 newObj[key] = objList[key][j]; } } newArr.push(newObj); } console.log(newArr) this.headers = [...flagTypeObjects]; this.tableNotesData = newArr;