用vue写一个div循环带表头的表格
时间: 2023-03-31 08:00:46 浏览: 67
可以使用Vue的v-for指令来循环渲染表格的行,同时使用v-if指令来判断是否需要渲染表头。代码示例如下:
```
<template>
<table>
<thead>
<tr v-if="showHeader">
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in dataList" :key="index">
<td>{{ item.col1 }}</td>
<td>{{ item.col2 }}</td>
<td>{{ item.col3 }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
showHeader: true, // 是否显示表头
dataList: [
{ col1: '行1列1', col2: '行1列2', col3: '行1列3' },
{ col1: '行2列1', col2: '行2列2', col3: '行2列3' },
{ col1: '行3列1', col2: '行3列2', col3: '行3列3' },
],
};
},
};
</script>
```