async getPorts () { const outputArr = [] const promises = [] for (let i = 1; i <= 7; i++) { promises.push( electricQuery({ electricId: ELECTRIC_ID, commandKey: 15, queryMode: 1, week: i }).then(({ data }) => { if (data[0]) { outputArr.push(data[0]) } }) ) } await Promise.all(promises) return { data: outputArr } }, 把数据渲染到 cols: [ { prop: 'start1', label: '星期' }, { prop: 'start2', label: '星期' }, { prop: 'start3', label: '星期' }, { prop: 'start4', label: '星期' }, { prop: 'start5', label: '星期' }, { prop: 'start6', label: '星期' }, { prop: 'start7', label: '星期' } ] 中,js代码怎么写
时间: 2023-12-06 22:45:23 浏览: 60
可以将获取到的数据按照星期几的顺序组合成一个对象,再将这个对象加入到数组中,最后将数组作为返回值传递给前端。代码示例如下:
```
async getPorts() {
const outputObj = {
1: {},
2: {},
3: {},
4: {},
5: {},
6: {},
7: {}
};
const promises = [];
for (let i = 1; i <= 7; i++) {
promises.push(
electricQuery({
electricId: ELECTRIC_ID,
commandKey: 15,
queryMode: 1,
week: i
}).then(({ data }) => {
if (data[0]) {
outputObj[i] = data[0];
}
})
);
}
await Promise.all(promises);
const outputArr = [
{ start1: outputObj[1].startTime || '', start2: outputObj[2].startTime || '', start3: outputObj[3].startTime || '', start4: outputObj[4].startTime || '', start5: outputObj[5].startTime || '', start6: outputObj[6].startTime || '', start7: outputObj[7].startTime || '' },
{ end1: outputObj[1].endTime || '', end2: outputObj[2].endTime || '', end3: outputObj[3].endTime || '', end4: outputObj[4].endTime || '', end5: outputObj[5].endTime || '', end6: outputObj[6].endTime || '', end7: outputObj[7].endTime || '' }
];
return { data: outputArr };
}
```
然后在前端页面中可以这样使用:
```
<el-table :data="outputArr" border>
<el-table-column prop="start1" label="星期"></el-table-column>
<el-table-column prop="start2" label="星期"></el-table-column>
<el-table-column prop="start3" label="星期"></el-table-column>
<el-table-column prop="start4" label="星期"></el-table-column>
<el-table-column prop="start5" label="星期"></el-table-column>
<el-table-column prop="start6" label="星期"></el-table-column>
<el-table-column prop="start7" label="星期"></el-table-column>
</el-table>
```
阅读全文