vue创建表格,列数为教室表里教室的总数,行数为6
时间: 2024-03-03 12:52:01 浏览: 23
好的,您可以参考以下代码创建一个列数为教室表里教室的总数,行数为6的表格:
```html
<template>
<div>
<table>
<thead>
<tr>
<!-- 循环渲染表头 -->
<th v-for="item in roomList" :key="item.id">{{ item.name }}</th>
</tr>
</thead>
<tbody>
<tr v-for="index in 6" :key="index">
<!-- 循环渲染每行的单元格 -->
<td v-for="item in roomList" :key="item.id + '_' + index"></td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
roomList: [
{ id: 1, name: '教室1' },
{ id: 2, name: '教室2' },
{ id: 3, name: '教室3' },
// ...
]
};
},
};
</script>
```
在这个例子中,我们使用了 `v-for` 指令来循环渲染表头和每行的单元格。其中,表头是由 `roomList` 数组中的元素渲染而成,每行的单元格则是通过循环渲染 `roomList` 数组中的元素和行数来实现的。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![](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)