首页0 : {startTime: "12:0:0", stopTime: "22:0:0"} 1 : {startTime: "0:0:0", stopTime: "0:0:0"} 2 : {startTime: "0:0:0", stopTime: "0:0:0"} 3 : {startTime: "0:0:0", stopTime: "0:0:0"} 这是每天的数据，需要在页面中循环七次，得到七天的数据，并把每天的四条数据渲染到页面上。使用element grid组件这是 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 } },js代码，如何修改，代码

0 : {startTime: "12:0:0", stopTime: "22:0:0"} 1 : {startTime: "0:0:0", stopTime: "0:0:0"} 2 : {startTime: "0:0:0", stopTime: "0:0:0"} 3 : {startTime: "0:0:0", stopTime: "0:0:0"} 这是每天的数据，需要在页面中循环七次，得到七天的数据，并把每天的四条数据渲染到页面上。使用element grid组件这是 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 } },js代码，如何修改，代码

时间: 2023-12-06 08:45:35 浏览: 348

您可以使用 `el-row` 和 `el-col` 组件来渲染每天的四条数据，循环七次，代码如下： ``` <template> <div> <el-row v-for="day in data" :key="day"> <el-col v-for="item in day" :key="item.startTime" :span="6"> <div>开始时间：{{ item.startTime }}</div> <div>结束时间：{{ item.stopTime }}</div> </el-col> </el-row> </div> </template> <script> export default { data() { return { data: [] } }, async created() { 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) this.data = outputArr } } </script> ``` 在模板中，我们循环 `data` 数组，它包含了七个数组，每个数组对应一天的数据。然后，我们再在每个数组中循环四次，渲染每天的四条数据。在 `created` 钩子函数中，我们使用 `Promise.all` 等待所有请求都完成，然后将结果保存到 `data` 中，以便在模板中使用。

阅读全文