Element UI el-tabs循环实现 - 如何在el-tabs中实现循环切换标签页
<template>
<div>
<div style="width: 800px;">
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
<el-tab-pane v-for="(item, index) in tabs" :label="item.label" :key="index">
{{ item.content }}
</el-tab-pane>
</el-tabs>
</div>
<button @click="nextTab">下一个</button>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: 0,
tabs: [
{ label: '标签页1', content: '内容1' },
{ label: '标签页2', content: '内容2' },
{ label: '标签页3', content: '内容3' }
]
};
},
methods: {
handleTabClick(tab) {
this.activeTab = tab.index;
},
nextTab() {
if (this.activeTab === this.tabs.length - 1) {
this.activeTab = 0;
} else {
this.activeTab += 1;
}
}
}
};
</script>
原文地址: https://www.cveoy.top/t/topic/pTLe 著作权归作者所有。请勿转载和采集!