element ui 提供了table ，根據對象數組 動态展示表格，但是實際需求中，有很多豎向展示表格的需求
效果圖：
原本資料
data: [
{
code: "weixin",
name: "微信",
icon:
"src位址",
isActive: false,
templateInfoList: [
{
code: "confirmation",
name: "人工确認",
isConfiged: true
},
{
code: "executeSuccess",
name: "執行成功",
isConfiged: true
},
{
code: "executeFailure",
name: "執行失敗",
isConfiged: true
},
{
code: "beforeCronJobExecute",
name: "定時執行前",
isConfiged: true
},
{
code: "beforeCronJobEnd",
name: "定時結束前",
isConfiged: true
},
{
code: "cronJobFailed",
name: "定時啟動失敗",
isConfiged: true
}
]
},
{
code: "weixin",
name: "郵件",
icon:
"src位址",
isActive: false,
templateInfoList: [
{
code: "confirmation",
name: "人工确認",
isConfiged: true
},
{
code: "executeSuccess",
name: "執行成功",
isConfiged: true
},
{
code: "executeFailure",
name: "執行失敗",
isConfiged: true
},
{
code: "beforeCronJobExecute",
name: "定時執行前",
isConfiged: true
},
{
code: "beforeCronJobEnd",
name: "定時結束前",
isConfiged: true
},
{
code: "cronJobFailed",
name: "定時啟動失敗",
isConfiged: true
}
]
},
]
element ui table 渲染形式
一條對象資料 為一數列渲染
資料
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 弄‘
}]
效果圖：
4條資料 每一行按照prop 把對應的對象資料得值取出來 并渲染
以我的項目為例，需要6條資料，現在是按照微信 郵件分劃的 4條資料 不符合，是以需要轉化
人工确認,1,2,3,4,
執行成功,1,2,3,4,
...
這種類型的 6組資料 (就是每一行的資料，這裡沒有标題)
将資料轉化
created() {
//第一行資料為标題 是以要有一個空字元串 預留位置
this.title.push("");
let matrixData = this.data.map(row => {
let arr = [];
this.title.push({
name: row.name,
icon: row.icon,
isActive: row.isActive,
isConfiged: row.isActive
});
for (let key in row.templateInfoList) {
arr.push(row.templateInfoList[key]);
}
return arr;
});
console.log(this.title);
// 加入标題拼接最終的轉化好得資料
this.transData = matrixData[0].map((col, i) => {
return [
col.name,
...matrixData.map(row => {
return row[i].isConfiged;
})
];
});
console.log(this.transData);
}
template 結構
管道
模闆
{{ item.name }}
{{ scope.row[index] }}
按照這個邏輯 就實作了表頭縱向顯示
原文：https://www.cnblogs.com/GoTing/p/14121602.html