vue 循环tabs 标签页 组件_vue学习笔记--v-for循环标签页label并实现根据不同label表格切换...
时间: 2023-12-29 19:03:13 浏览: 40
好的,我知道你想问什么。首先,我们需要创建一个 Tabs 组件,并且在组件中使用 v-for 循环来渲染标签页。以下是一个简单的示例代码:
```html
<template>
<div class="tabs">
<div class="tab" v-for="(tab, index) in tabs" :key="index" :class="{ 'active': activeTab === index }" @click="activeTab = index">
{{ tab.label }}
</div>
<div class="tab-content">
<slot :name="tabs[activeTab].label"></slot>
</div>
</div>
</template>
<script>
export default {
name: 'Tabs',
data() {
return {
activeTab: 0,
tabs: [
{ label: 'Tab 1' },
{ label: 'Tab 2' },
{ label: 'Tab 3' }
]
}
}
}
</script>
<style>
.tabs {
display: flex;
flex-direction: column;
}
.tab {
cursor: pointer;
padding: 10px;
border: 1px solid #ccc;
border-bottom: none;
}
.tab.active {
background-color: #ccc;
}
.tab-content {
border: 1px solid #ccc;
padding: 10px;
}
</style>
```
在上面的示例中,我们使用了一个名为 tabs 的数组来存储每个标签页的信息。我们使用 v-for 循环来渲染每个标签页的标签,并且使用 activeTab 变量来追踪当前选中的标签页。当用户单击标签页时,我们将更新 activeTab 变量,并使用插槽来渲染相应的标签页内容。
如果你想根据不同的标签页来显示不同的表格内容,你可以在插槽中使用 v-if 或者 v-show 来判断应该显示哪个表格。例如:
```html
<template>
<div class="tabs">
<div class="tab" v-for="(tab, index) in tabs" :key="index" :class="{ 'active': activeTab === index }" @click="activeTab = index">
{{ tab.label }}
</div>
<div class="tab-content">
<table v-if="tabs[activeTab].label === 'Tab 1'">
<!-- 表格 1 的内容 -->
</table>
<table v-else-if="tabs[activeTab].label === 'Tab 2'">
<!-- 表格 2 的内容 -->
</table>
<table v-else-if="tabs[activeTab].label === 'Tab 3'">
<!-- 表格 3 的内容 -->
</table>
</div>
</div>
</template>
```
在上面的示例中,我们使用了 v-if 和 v-else-if 来判断当前选中的标签页是哪个,并根据不同的标签页显示不同的表格内容。