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].timers) } }) ) } await Promise.all(promises) console.log({ data: outputArr }) return { data: outputArr } }, 每次调用接口得到周一到周日其中一天的数据 数据形态是[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"}] 现在需要把一周七天的数据渲染 使用elementUI 的grid布局,并且每天的四条数据都是可以单独修改的 代码怎么更改
时间: 2023-11-27 20:53:57 浏览: 23
你可以参考以下代码,使用 `el-row` 和 `el-col` 来实现 Element UI 的 grid 布局,然后在每个 `el-col` 中渲染一天的数据,每个数据都是可编辑的:
```
<template>
<div>
<el-row>
<el-col :span="6">
<div>Monday</div>
<div v-for="(timer, index) in timers[0]" :key="index">
<el-input v-model="timer.startTime" placeholder="Start Time"></el-input>
<el-input v-model="timer.stopTime" placeholder="Stop Time"></el-input>
</div>
</el-col>
<el-col :span="6">
<div>Tuesday</div>
<div v-for="(timer, index) in timers[1]" :key="index">
<el-input v-model="timer.startTime" placeholder="Start Time"></el-input>
<el-input v-model="timer.stopTime" placeholder="Stop Time"></el-input>
</div>
</el-col>
<el-col :span="6">
<div>Wednesday</div>
<div v-for="(timer, index) in timers[2]" :key="index">
<el-input v-model="timer.startTime" placeholder="Start Time"></el-input>
<el-input v-model="timer.stopTime" placeholder="Stop Time"></el-input>
</div>
</el-col>
<el-col :span="6">
<div>Thursday</div>
<div v-for="(timer, index) in timers[3]" :key="index">
<el-input v-model="timer.startTime" placeholder="Start Time"></el-input>
<el-input v-model="timer.stopTime" placeholder="Stop Time"></el-input>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<div>Friday</div>
<div v-for="(timer, index) in timers[4]" :key="index">
<el-input v-model="timer.startTime" placeholder="Start Time"></el-input>
<el-input v-model="timer.stopTime" placeholder="Stop Time"></el-input>
</div>
</el-col>
<el-col :span="6">
<div>Saturday</div>
<div v-for="(timer, index) in timers[5]" :key="index">
<el-input v-model="timer.startTime" placeholder="Start Time"></el-input>
<el-input v-model="timer.stopTime" placeholder="Stop Time"></el-input>
</div>
</el-col>
<el-col :span="6">
<div>Sunday</div>
<div v-for="(timer, index) in timers[6]" :key="index">
<el-input v-model="timer.startTime" placeholder="Start Time"></el-input>
<el-input v-model="timer.stopTime" placeholder="Stop Time"></el-input>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
timers: []
};
},
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].timers);
}
})
);
}
await Promise.all(promises);
this.timers = outputArr;
}
};
</script>
```
这段代码中,使用 `v-for` 循环渲染每个数据,并且使用 `v-model` 双向绑定数据,使得数据可编辑。同时,使用了 `async/await` 来等待异步请求完成后再渲染数据。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)