v-for循环创建的el-tab-pane
时间: 2023-08-13 21:10:10 浏览: 103
v-for 循环可以用于动态创建 `el-tab-pane` 组件,以实现根据数据列表生成多个标签页的功能。下面是一个示例:
```html
<template>
<el-tabs v-model="activeTab">
<el-tab-pane v-for="(item, index) in tabList" :label="item.label" :name="item.name" :key="index">
<!-- 标签页内容 -->
{{ item.content }}
</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeTab: '', // 当前选中的标签页
tabList: [ // 标签页数据列表
{ label: '标签1', name: 'tab1', content: '标签页1的内容' },
{ label: '标签2', name: 'tab2', content: '标签页2的内容' },
{ label: '标签3', name: 'tab3', content: '标签页3的内容' }
]
};
}
};
</script>
```
在上述示例中,通过 `v-for` 循环遍历 `tabList` 数组,根据数组中的每个元素动态创建 `el-tab-pane` 组件,并通过 `:label`、`:name` 和 `:key` 绑定相应的属性和值。`label` 属性用于显示标签页的标题,`name` 属性用于唯一标识每个标签页,`:key` 用于给循环的每个子元素指定唯一的标识。在每个 `el-tab-pane` 中,可以放置相应的内容。
这样,当 `tabList` 数组中的数据发生变化时,`el-tab-pane` 组件会自动更新,添加或删除相应的标签页。