後臺返回的數據類型如下:
"playerGameBannerObjs": [{
"id": "119e159f0212412fb5225c572693de63",
"gameType": "丟你老母川建國",
"price": 20.00,
"scales": [{
"orderNum": 2,
"scale": "9"
}, {
"orderNum": 3,
"scale": "8"
}, {
"orderNum": 5,
"scale": "7"
}]
}, {
"id": "84aea6416dfc4e7e958056bbb0138876",
"gameType": "中國臺灣省",
"price": 20.00,
"scales": [{
"orderNum": 0,
"scale": "9"
}, {
"orderNum": 0,
"scale": "8"
}, {
"orderNum": 5,
"scale": "7"
}]
}]
頁面的表格渲染的代碼是:
<el-table stripe border :data="tableData" height="500">
<el-table-column label="蔡英文我日你哥狗B">
<template slot-scope="scope">
{{scope.row.gameType}}
</template>
</el-table-column>
<el-table-column
:label="item.scale+'蔡省長'"
v-for="(item,index) in DynamicColumn"
:key="index"
>
<template slot-scope="scope">
{{ scope.row.scales[index].orderNum | format }}
</template>
</el-table-column>
</el-table>
監聽變量,重中之重:
computed: {
DynamicColumn: function() {
debugger
if (this.tableData.length > 0) return this.tableData[0].scales
return []
}
}