易网时代-编程资源站
易网时代-编程资源站 <template>
<view class="content">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th>城市</th>
<th v-for="CityName in tableHeader">{{CityName}}</th>
</tr>
<tr v-for="(tr,index) in tableRowHeader">
<th>{{tr}}</th>
<td v-for="(CityName,cindex) in tableHeader">
{{tableDataList[index][cindex].CityCount}}
</td>
</tr>
</table>
</view>
</template>
<script>
export default {
data() {
return {
result: [{
"CityID": "1302",
"CityName": "唐山",
"PFDJ": "国Ⅳ",
"Citycount": 3
}, {
"CityID": "1302",
"CityName": "唐山",
"PFDJ": "国Ⅴ",
"Citycount": 195
}, {
"CityID": "1304",
"CityName": "邯郸",
"PFDJ": "国Ⅳ",
"Citycount": 17
}, {
"CityID": "1304",
"CityName": "邯郸",
"PFDJ": "国Ⅴ",
"Citycount": 12708
}, {
"CityID": "1350",
"CityName": "合计",
"PFDJ": "-",
"Citycount": 12923
}],
tableRowHeader: [],
tableHeader: [],
tableDataList: []
}
},
onLoad() {
var vm = this;
vm.initDataTable();
},
methods: {
contains: function(arr, obj) {
var i = arr.length;
while (i--) {
if (arr[i] === obj) {
return true;
}
}
return false;
},
initDataTable() {
var vm = this;
//初始化定义二维数数
for (var index in vm.result) {
var d = vm.result[index];
//初始化行头
if (!vm.contains(vm.tableRowHeader, d.PFDJ)) {
vm.tableRowHeader.push(d.PFDJ);
}
//初始化列头
if (!vm.contains(vm.tableHeader, d.CityName)) {
vm.tableHeader.push(d.CityName);
}
}
//初始化结果数组
vm.tableDataList = [];
var all = [];
for (var i = 0; i < vm.tableRowHeader.length; i++) {
var tmp = [];
for (var j = 0; j < vm.tableHeader.length; j++) {
tmp[j] = {
CityID: vm.tableHeader[j],
CityCount: vm.InitValue(vm.tableHeader[j], vm.tableRowHeader[i])
};
}
vm.tableDataList.push(tmp);
}
console.log("处理后结果：", vm.tableDataList)
},
InitValue: function(th, row) {
var vm = this;
var val = 0;
for (var p in vm.result) {
var dt = vm.result[p];
console.log("---------", dt.CityName, th, dt.PFDJ, row, dt.Citycount, "---------");
if (dt.CityName == th && dt.PFDJ == row) {
val = dt.Citycount;
break;
}
}
return val;
}
}
}
</script>
<style>
table{font-size: 14px;line-height: 35px;width:100%}
table td,table th{padding:0px 10px;text-align:center}
</style>